Change navbar hover colors?


Well-known member
I'm wanting to change a few colors on the Navbar; 1. the font text color and 2. the background hover color.

Most specifically the menu items in the nav bar that are not selected, such as the "MEMBERS" menu, next to the "FORUMS" menu item that is selected. Right now the "MEMBERS" link is a very pale blueish color I'd like to change as well as the background hover color... when not hovering over the down arrow, the background becomes blue. When hovering over the down arrow on the "MEMBERS" menu it's green.

Here are some screenshots to show what I mean:

Normal state:

Hover state:

Hover on down pointing arrow state:

Thanks in advance!


Currently having the same problem with the colors of the navbar.
The style properties really could use some more options (like for the parts mentioned above).

But even delving into the css part of it can be VERY frustrating, so i'd be thankful for an update.


Well-known member
You can use tools like Firebug to find exactly what you need. In this case...

In this screenshot you right click the element you want to inspect and hit inspect with firebug(firefox plugin)
Then you can click the Style dropdown and choose hover

It'll result in showing which code is prompting it: Screenshot_2.png

So you can add to your extra.css:

.Responsive .navTabs .navTab.PopupClosed:hover {
background-color: #FFF;
Replacing FFF with your desired color.

I also added .Responsive before .navTabs(using an extra selector will make it so you won't have to use an !important typically.

As for the popup, it's controlled via Style Properties -> Popup menus-> popup control (open) at least the bg/gradient part.