change colour of individual navigation tabs

I have a new site that I am building and the design calls for each of the individual navigation tabs to have it's own colour, which matches the theme colour for that section.

I've isolated the individual IDs for the navigation li but I cannot for the life of me figure out which bit of CSS to play with or where to place my custom code.

For example; the first nav item has the following code

<li id="menu-item-95" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-95"><a href="http://acs.razordigital.com.au/events/">Events</a></li>

To make the background of this particular li do I call the ID or the Class? I would have thought that using the ID is the most appropriate in this instance.

So I wrote the following CSS to make the background colour of the Events navigation blue with white font

li#menu-item-95 {
  background: #004071;
  color: #fafafa;
}

And I thought that this should probably be placed in the Theme Settings custom CSS rules but nothing happens. I am wondering if I have written the CSS incorrectly or placed it in the wrong place.

If you could give me some help in resolving this it would be much appreciated

Cheers... brett

  • Vinod Dalvi

    Hi Brett,

    I hope you are well today and thank you for your question.

    I've isolated the individual IDs for the navigation li but I cannot for the life of me figure out which bit of CSS to play with or where to place my custom code.

    You can use the developed custom CSS code in the upfront themes by adding it in the Custom CSS option of the upfront theme as described in the below post and pdf.

    https://premium.wpmudev.org/wp-content/uploads/2015/01/Upfront_guide.pdf
    https://premium.wpmudev.org/blog/upfront-custom-css/

    To make the background of this particular li do I call the ID or the Class? I would have thought that using the ID is the most appropriate in this instance.

    As you want to apply separate color for separate navigation item/ navigation tabs therefore you should use the ID as it's unique.

    So I wrote the following CSS to make the background colour of the Events navigation blue with white font

    And I thought that this should probably be placed in the Theme Settings custom CSS rules but nothing happens. I am wondering if I have written the CSS incorrectly or placed it in the wrong place.

    The custom CSS code that you have developed should work for you. I found on your site you are already using the following custom CSS code so this may be overwriting your above CSS code therefore please remove the following existing code if any and then use the above code.

    li#menu-item-95 {
      background: #000000;
    }

    You can also make your custom code overwrite other code if the above code doesn't work for you then use the following code.

    #menu-main li#menu-item-95 {
      background: #004071;
      color: #fafafa;
    }

    After using custom CSS code, please clear your browser cache so that you can see the result.

    Best Regards,
    Vinod Dalvi