WordPress Tutorial Videos by WP101®

175+ WordPress tutorial videos for non-techies.

  • About Us
    • Top WordPress Products
    • Testimonials
  • WordPress Tutorials
    • Intro to WordPress
    • WordPress 101
    • AIOSEO 101
    • WP Mail SMTP 101
    • Easy Digital Downloads 101
    • WPCode 101
    • WP Simple Pay 101
    • RafflePress 101
    • Elementor 101
    • WPForms 101
    • Spectra 101
    • How to Blog Better
    • WooCommerce 101
    • Beaver Builder 101
    • Ninja Forms 101
    • WP Rocket 101
  • Help Forum
    • Hire a WordPress Expert
  • Blog
  • Contact
  • Sign In

How do I change the Menu Nav Bar color in Twenty Twenty?

Get answers to your WordPress questions!

Tired of wasting time scouring Google for answers to your WordPress questions? Since 2008, we've helped countless WordPress site owners just like you get unstuck. Get answers to your WordPress questions — plus unlimited access to our entire library of 150+ WordPress tutorial videos. Why not join us today?

View Membership Options
WordPress Questions and Answers › How do I change the Menu Nav Bar color in Twenty Twenty?
0 Vote Up Vote Down
G
Gary Coetzee
asked 4 years ago
How do I change the Menu Nav Bar color in Twenty Twenty?
1 Answers
0 Vote Up Vote Down
Shawn Hesketh answered 4 years ago
Hi Gary, The best way to customize your theme is to override the default styles by adding your own custom CSS to: Customize > Additional CSS For example, to change the background color of the header and navigation menu, you can add (replacing the hex code with the color of your choosing): #site-header { background: #d54e21; } To change the color of the text links in the menu, you can use: li.menu-item a { color: #ffffff; } The easiest way to find the name of an object so you can target is with custom CSS is to simply right-click on an element and choose, “Inspect Element” to open the Inspector in your web browser. In the code that appears in the pop-up, you'll find most objects have an “id” and/or a “class” name. That's how I found out that the header in the Twenty Twenty theme has an id of: #site-header With that in hand, you can add your own custom CSS to override the styles by adding your CSS to: Customize > Additional CSS. But, if you don't want to bother with writing your own CSS, you can also find several plugins like Options for Twenty Twenty in the WordPress.org Plugin Directory. This plugin and the others like it provide you with a number of additional options for customizing the style of your theme — without writing any code. And of course, for more involved tweaks to your site, you can always hire an expert from Codeable who can handle everything from minor customizations to a full-blown custom theme. Hoep this helps point you in the right direction!

Please login or register to join the conversation!

Share this with someone?

FacebookTweetLinkedIn

Most Recent Questions

  • I took the Sprectra 101 course. Now I’m building my won web site but I still have the Specra Style Guide and I think it’s causing an issue with Sprectra One. How do I get rid of the Style guide? asked by Mallis01, 2 years ago
  • Can you offer any tips, or best practices, on how to redesign and upgrade an old website? asked by FSAuthor, 2 years ago
  • How to create a blog in Spectra? asked by TJ, 2 years ago
  • How do I make all the words show Uppercase? asked by iLoveToLiveWell.com, 2 years ago
  • Why does my right side dashboard top look different than course. asked by Blues1947, 2 years ago

Site Links

  • About Us
  • Your Account
  • Products We ❤️
  • Affiliates
  • Testimonials
  • Blog
  • Contact Us

Courses

  • WordPress 101
  • WooCommerce
  • Elementor
  • Spectra
  • WPForms
  • Ninja Forms
  • View All →

Products

  • WP101.com
  • WP101 Plugin
  • Embed our videos on your site!

Recent Posts

  • How to Set Up 301 Redirects in WordPress (Step-by-Step Guide)
  • 5 Best WooCommerce Review Plugins for Power Sellers (2025)
  • WordPress SEO 101: The Ultimate Guide to Optimizing Your Website
  • 11 Best Business WordPress Themes (Proven to Convert)
  • How to Sell eBooks on WordPress: The Complete 2025 Guide

Connect with Us

  • Email
  • Facebook
  • Twitter

WordPress Tutorials by WP101© 2008-2025 WP101® LLC. All rights reserved.
WP101® is a registered trademark with the U.S. Patent and Trademark Office.
WP101® is hosted by SiteGround.
Privacy Policy | Terms of Use | Disclosure | WP101 Coupon