WordPress: Change Color of specific menu Tab in Navigation menu

Complexity: A recent problem i faced was to change the color of only one tab in navigation menu bar of wordpress. I was using Ubermenu MegaMenu plugin but that didn’t provide any option for this. So i did it myself. You may also face such situation so following is smart solution to do that.

Let’s say you create a menu item “HOME” in your wordpress menu. When you create it in wordpress, a specific ID and Class is assigned to that menu item like:

<li id="menu-item-1704" class="menu-item menu-item-type-post_type menu-item-1704"><a href="http://www.wordpress.org">Home</a></li>

WordPress always assigns each “menu-item”  a unique ID Number.  So open stylesheet of your theme that styles menu, usually style.css or otherwise open header.php  file of your theme and add following code between head :


#menu-item-1704
{
    background:red;
}

For sake of example, i have used minimum css but you can add other menu properties as well for #menu-item-1704 to extend it’s style.

Another problem you may face is to find ID of your menu item. To find out id of your menu item that you want to style differently, go to Appearance > Menus.  Hover your mouse on menu item tab:

menu-navigation-inst-01

See the URL that will appear in browser status bar, it will look like:

www.somewebsite.com/wp-admin/nav-menus.php?edit-menu-item=377#menu-item-settings-377

menu-navigation-inst-1

 

Here 377 is menu item ID.

So once you find the menu item ID, you can easily style that specific menu item as i mentioned above.

Please share this post with others –Sharing is Caring !!! 

One thought on “WordPress: Change Color of specific menu Tab in Navigation menu

Leave a Reply