Formatting one individual menu item on main menu


#1

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.


#2

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 > li.menu-item:not(#menu-item-475):not(#menu-item-476):not(#menu-item-478):not(#menu-item-339):not(#menu-item-340) > a.menu-item-link:hover {
	color:#fff!important;
}

#3

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 {
color:orange!important;
}

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


#4

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


#5

Here is the site: http://capvalis.ch/

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 >

#6

Try this

body .main-navigation-ul > li.menu-item:not(#menu-item-243):not(#menu-item-1019):not(#menu-item-1029):not(#menu-item-938) > a.menu-item-link {
  color: orange!important;
}

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