Different colors in hover -Coller theme

Go to Appearance > Coller Settings > Basic.

Scroll down to the Custom CSS field and copy & paste this rule:

#site-navigation a:hover {
border-top: #0000FF solid 4px;
}

#0000FF is the RGB hex notation for blue, use whatever color value you want.

Thanks, but I guess I wasn’t really clear with my question.
The thing I’m searching for is to give every menu button a different color when sliding over it.
For example: The first tab <home> is blue, the second tab <information> is red, and so on.

Could you help me with this one?

In addition to the last post, I only want to change the small line, not the whole button.

Thanks in advance!

OK, thank you for the clarification.

You just need a slight modification to the above CSS. Here are the first two rules that you’ll need, the first rule is for the first menu item, the second rule is for the second menu item:

#site-navigation li:nth-child(1) a:hover {
border-top: #FF0000 solid 4px;
}

#site-navigation li:nth-child(2) a:hover {
border-top: #0000FF solid 4px;
}

The key is using what’s called the nth-child(n) pseudo-selector. The li:nth-child(1) selects the first menu item, the li:nth-child(2) selects the second menu item. So just repeat each rule for as many menu items that you have, i.e., add a rule for li:nth-child(3) to target the third menu item, and so on.

Then for each rule, change the hex value for the border-top (the line that goes across the top of the menu item). In the example above, the first menu item gets a color of red, the second menu item gets a color of blue.

Thanks, thanks, thanks! It works excellent!

My submenu’s do have the same colors. Is there a possibility to give them the same color as the main menu button instead of all the colors in the main menu buttons.

How strange. I just did a test on my sandbox site, and some of my submenus had the same color as the parent menu item, but others took on the color of the top level menu items. I’ll have to take a look.

Edit: Ok, it looks like if I don’t define a rule for a top level menu item, then the submenu items below it take on the colors of the top level menu items.

Have that too, don’t strictly follow the parent menu item.
What solution did you came up with?

When sliding over the menu buttons the colors I wanted show up.
But when clicking on the buttons make all the buttonlines black, can I change that color also. It’s ok when it’s the same color for all button in this case.

Change above code to this. Make sure a rule is defined for each menu item, even if it’s the default color of #0C9.

#site-navigation li:nth-child(1) a:hover,
#site-navigation li:nth-child(1):hover a,
#site-navigation li.current_page_item:nth-child(1) a {
border-top: #FF0000 solid 4px;
}

#site-navigation li:nth-child(2) a:hover,
#site-navigation li:nth-child(2):hover a,
#site-navigation li.current_page_item:nth-child(2) a {
border-top: #0000FF solid 4px;
}