Formatting one individual menu item on main menu


Hi there,

I would like to adjust the colour of an individual menu item, but Jupiter seems to override any changes I make with CSS.

I’ve taken all of the advice listed in these threads, but it seems that no-one has quite worked out this issue.

Is there a way to override Jupiter’s styling options for individual menu items?

Many thanks in advance for any replies.


Since Jupiter’s own CSS is tagged !important you need the body selector at the beginning to override Jupiter’s options.

For example, I have some custom CSS overriding the menu link hover color for one menu item:

For example, on a site I just finished I have one menu item that I want to turn white on hover, while the other links turn yellow. So I set the yellow color in Jupiter’s Theme Options, and then in my custom CSS I add:

body .menu-hover-style-2 .main-navigation-ul > > {


MDWComm, thanks for the code snippet. I’ve adjusted it a little bit for my site for a single menu item, but to no success.

body .menu-hover-style-2 .main-navigation-ul > li.responsive-menu-item-2207 > a {

I’m not too proficient with CSS, can you see any obvious glaring errors with my statement?


If you can link me to the site I can probably figure it out.


Here is the site:

Let me know what you think. This part of the code should remain constant for every Jupiter install, right?

body .menu-hover-style-2 .main-navigation-ul >


Try this

body .main-navigation-ul > > {
  color: orange!important;

I didn’t see a menu item 2207. You should have every menu item there except the one you want changed.


I tried this and didn’t work… This my website:

I appreciate all the help you can give me.