• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
  • Skip to footer

The Cre8tive Diva - WordPress Developer

Digital Nomad | Helping WordPress & Genesis Framework Website Owners All Over the World

  • Home
  • About
    • Terms of Service & Privacy
    • Accessibility
  • Services
    • Blogger to WordPress Migration
    • Buddypress Installation
  • My Work
  • Blog
    • Tutorials
    • Five on Friday
    • Genesis Framework
    • Tipsy Tuesday
    • WordPress
  • Contact
Home » Change the Color of One Menu Tab in WordPress

Published on January 12, 2014 / Updated on May 6, 2016 / Reading Time: 1 minute

Change the Color of One Menu Tab in WordPress

If you are using WordPress for your websites, sometimes you just want to add a little zip, zing or pizzazz to just one menu item. You can easily do that using CSS Classes that is attached in your Menus. If you’ve never seen the CSS Classes you need to open up the Screen Options tab as seen in the following image:

Menus ‹ Sample

Open the menu item you wish to change. Add a unique name in the CSS Classes field and then Save the menu. Then go to Appearance > Editor and make sure you are in the Style.css file:

Edit Themes ‹ Sample

As you can see I’ve added the unique name I gave my menu item along with a color. This particular code will only color the background of the navigation only:

.sample-tab1 {
background-color: #990000;
}

But this code will provide the background color along with a color change for the fonts.

.sample-tab1 a {
background-color: #990000;
color: #ffffff;
}

Category Nav Color

Just think, if you want a menu full of RAINBOW COLORS…. you’d repeat these steps and whalla…. you’d have the rainbow!

  • Like my Signature? Get the Signature Widget for Genesis right here!

  • FacebookTweetPinPrintShares21

    Filed Under: Tutorials

    A recent conflict was found when Genesis Simple Share is activated and configured while using the Posts and Page Grid in Genesis Blocks. The error can be seen when viewing the content on the front end. The error does not display in edit mode. Below is a temporary fix that will allow you to manually set […]

    Reader Interactions

    Comments

    1. Chrissy says

      February 28, 2014 at 10:36 am

      Hey Anita,

      I’ve been meaning to come check out your site for a while and love it. This is such a helpful tutorial I remember searching all over the internet puling my hair out and here you have it, so simplified. How would you add an icon, say for the home tab? Thanks

      • Anita C (Cre8tiveDiva) says

        February 28, 2014 at 11:24 am

        Thanks Chrissy! Are you using an HTML5 theme or a non-HTML5 theme? Brad Dalton did a tutorial on adding icons to the nav menu here. I don’t want to recreate the wheel on this, so take a look at this and see if this helps you.

        • Chrissy says

          February 28, 2014 at 11:57 am

          It’s a theme from Pixelista. I love Brad’s tutorials and will take a look. Thanks 🙂

          • Anita C (Cre8tiveDiva) says

            February 28, 2014 at 11:59 am

            Okay, I am familiar with her themes. I used to provide support for some of those last year. If Brad’s doesn’t work out, let me know!

    Primary Sidebar

    It's just me and my dog Bella. I am a freelance web developer at Cre8tiveDiva.com. I build websites using WordPress and the Genesis Framework, WooCommerce and provide troubleshooting and support. I also build with Shopify. I love chocolate, lots of coffee!

    Sign Me Up!

    Receive my blog posts, tips and updates delivered to your inbox!

    Yes, Sign Me Up

    *By signing up you will receive new blogs, updates on products, services and important alerts.

    Categories

    • Design
    • eCommerce
    • Five on Friday
    • Fonts
    • Free Themes
    • Freebie Friday
    • Genesis Framework
    • Genesis Plugins
    • Genesis Themes
    • Genesis Untapped
    • Instagram
    • MailChimp
    • News
    • Plugins
    • Press This News
    • Social Media
    • Tipsy Tuesday
    • Troubleshooting
    • Tutorials
    • Uncategorized
    • Web Development
    • WooCommerce
    • WordPress
    • WordPress Plugins

    Footer

    Digital Nomad! I can be anywhere I wanna be now.

    Latest Blog Posts

    • Temporary Fix When Using Genesis Blocks Posts and Page Grid with Genesis Simple Share
    • How to Add Reading Time to a WordPress Genesis Child Theme Without a Plugin
    • How to Add “Shop” to WooCommerce Breadcrumbs when Using Yoast

    Looking for Something?

    Copyright © 2012–2022 · Designed with by Me! · Hosted on SiteGround

    We use cookies to ensure that we give you the best experience on our website. If you continue to use this site we will assume that you are happy with it.OkPrivacy policy