WordPress Graphene Theme Nav Bar Color Modification

Introduction

Working on the Graphene Official Forum, I have come across many requests on how to adjust the main navigation menu colors.  Well, we are going to tackle every aspect of the menu in this tutorial.

Remember, Syahir is making color options in the nav menu a standard feature beginning in Graphene version 1.8.  However, I’m sure many people will still find needs for wanting to further customize the menu.

So, let’s get started…

The Main Background Color

Let’s first address the default background color.

Here is the css code how it appears in the stylesheet:

#header-menu-wrap {
background: url("images/sprite_h.png") repeat-x scroll left -3px #101010;
position: relative;
z-index: 15;
}

So, in order to change it from our child theme stylesheet, we would use the following code to make it (red, for example):

#header-menu-wrap {
background: none !important; // Gets rid of default background
background-color: #FF0000 !important; // Adds our selected color
}

Notice the use of the !important css declaration.  This forces the color changes to take priority over any other declarations (assuming they are not using the !important declaration also).

Also, note we don’t have to include the position or the z-index from the original stylesheet.  This is because the child theme stylesheet gets loaded (in addition to) the main stylesheet.  So think of it as both styleshees being “combined”… and the additional rules we write in the child theme get “added to” the primary stylesheet.

Lastly, before moving forward, also note you can use gradients for your background colors.  You can use Mozilla’s Online Gradient Color Maker to get the code for a gradient background.  Here is an example:

#header-menu-wrap {
background: none !important; // Get rid of default background
background: #4096ee !important; // Add our selected color or gradient
background: -moz-linear-gradient(top, #4096ee 0%, #4096ee 100%) !important; // Add our selected color or gradient
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4096ee), color-stop(100%,#4096ee)) !important; // Add our selected color or gradient
background: -webkit-linear-gradient(top, #4096ee 0%,#4096ee 100%) !important; // Add our selected color or gradient
background: -o-linear-gradient(top, #4096ee 0%,#4096ee 100%) !important; // Add our selected color or gradient
background: -ms-linear-gradient(top, #4096ee 0%,#4096ee 100%) !important; // Add our selected color or gradient
background: linear-gradient(to bottom, #4096ee 0%,#4096ee 100%) !important; // Add our selected color or gradient
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4096ee', endColorstr='#4096ee',GradientType=0 ) !important; // Add our selected color or gradient
}

Note, be careful using the filter declaration with IE8.  It’s buggy.  By including each browser’s code for rendering… this is the best chance for cross-browser compatibility.

Also, don’t forget the !important declaration.

Active (and Hover) Menu Tab Color

Okay, so now let’s set the active menu tab color.  The same rules apply as above, so I’m just going to provide the code.  This will also set the hover color for each menu item.

Here is the css as it appears in Firebug:

#header-menu > li:hover, #header-menu > li.current-menu-item, #header-menu > li.current-menu-ancestor {
background: none !important; // Gets rid of default background
background: #FF0000 !important; // Makes it red, change to your liking
}

So, using the same rules as above, go ahead and change the active menu background color.  Again, don’t forget the !important declarations, and remember you can use gradients.

Child Pages Active Color

The battle is not over.  Now, we need to adjust the colors for the child pages in the menu.  Let’s first tackle the default color:

#header-menu ul li {
background: none !important; // Gets rid of default background
    background: #FF0000; // Adds our selected color, change this value (currently red)
}

Child Pages Hover Color

And lastly, the child menu hover color:

#header-menu ul li:hover, #header-menu ul li.current-menu-item, #header-menu ul li.current-menu-ancestor {
background-color:  none !imortant;
background: #000000 !important;
}

Taking it Further

You can also target each menu item by using it’s unique ID.  This unique ID is generated “behind the scenes” anytime a new menu item is created.

Use Mozilla Firebug to identify the unique ID, and then use css to target just that menu item.

Here is a screenshot from Firebug, showing the unique ID.

And here is an example of how to target just that menu item:

#menu-item-70 {
background: none !important;
background: #FF0000 !important;
}

So, this will adjust only the background of just that single menu item. To adjust the others’, you will need to go back to Firebug and find each ones unique ID.

Remember, background colors are not the only styles you can adjust.

You can also:

  • make the text larger or smaller
  • add effects on hover only
  • change the default text color
  • add a background image
  • the list goes on and on

Most !Importantly (ha ha) … Have Fun!!

9 thoughts on “WordPress Graphene Theme Nav Bar Color Modification

  • March 5, 2017 at 11:48 pm
    Permalink

    What’s up, every time i used to check webpage posts here early in the break of
    day, since i like to gain knowledge of more and more.

    Reply
  • Pingback: Here It Is! Header Color Modification Tutorial « Graphene Theme Forum

  • December 28, 2015 at 3:45 am
    Permalink

    Valuable info. Fortunate me I discovered your website accidentally,
    and I am surprised why this coincidence didn’t came about in advance!
    I bookmarked it.

    Reply
  • December 13, 2015 at 4:14 am
    Permalink

    Everyone loves what you guys are usually up too.
    This kind of clever work and reporting! Keep up the
    amazing works guys I’ve added you guys to my personal blogroll.

    Reply
  • December 11, 2015 at 4:36 am
    Permalink

    I think this is among the such a lot significant info for
    me. And i am glad reading your article. However wanna remark on few
    basic issues, The web site taste is perfect, the articles is actually excellent :
    D. Just right process, cheers

    Reply
  • December 8, 2015 at 3:49 am
    Permalink

    These various strategies could properly enable you
    by way of your breast cancer therapy and perhaps even get you a speedier recovery.

    Reply
  • September 26, 2012 at 7:11 pm
    Permalink

    Using a WordPress classifieds theme on your WordPress installation is a great way to come up with a full blown classified ads website without any complicated technical details to go through. By using a classifieds theme, you can easily turn your WordPress blog into a classifieds website with only a few mouse clicks.

    Reply
  • July 19, 2012 at 7:27 am
    Permalink

    Nice website!! I don’t know how google evaluates things, your website age shows Creation Date: 01-Sep-2011
    Expiration Date: 01-Sep-2012 . May be created earlier to be PR4. Thanks for your patience and well representation. I develop WP themes but not for commercial purposes but for personal use. I have not got (may be not tried to use it and learn) expertise in base64 encoding in wp theme. Thanks for the customization instruction of the graphene theme.

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *