Navbar menu items: replacing color change with underline

[blog42]

Hi,

I’m using the Icon stack and the only option I see in the header customization options is to change the color of the menu items on hover. How can I add an underline on hover and NOT change the color of the menu item?

Thank you.

[paul.r]

Hi Robert,

To achieve that, you can add the code below in Theme Options > CSS

.x-navbar .desktop .x-nav>li>a>span {
    border: 0;
}

.x-navbar .desktop .x-nav>li>a:hover>span {
    text-decoration:underline;
     color:#000;
}

Hope that helps

[blog42]

Yes, thank you, that was exactly what I was looking for. My only additional question is - how do I get rid of the color change on hover? I can set it the color the Header options, but I don’t see any option to have NO color change on hover. The underline is the only change I want on hover.

[christian]

Hey Robert,

Yes, there is no option because the way to achieve that is to set the Navbar Links Color the same as the Navbar Links Hover. See https://youtu.be/-a0DwG-c9zc

In case you wonder why there’s no option to turn off the hover, it actually will add bloat to the theme. Moreover, most users want a hover color for the Navbar Link.

Hope that helps.

[blog42]

Yes, that makes sense, but I guess I missed one important point in describing my problem. In my case, there is no “same as” color, since my navbar menu items use two different colors.

The active menu item is a different color than the rest of them. In my case, inactive menu items are blue, the currently active one is orange. If I use a blue hover color, the active menu item becomes the same color as the inactive ones on hover. If I use an orange hover color, the selected inactive menu item becomes the same color as the currently active one.

I find both options visually confusing from a UX perspective and I don’t want to add a third color as I don’t want the site to look like a Christmas tree…

Is it possible to set the hover so it simply leaves the existing color of the menu item unchanged, and only adds an underline?

[basanta]

Hi There,

Thanks for writing in!

You can keep the original color of the menu in hove without changing it.
Please add the color code of your menu item here in the css that provided by paul.

.x-navbar .desktop .x-nav>li>a:hover>span {
    text-decoration:underline;
     color:#000; /* you can set the color here */
}

Hope this helps!

[blog42]

Thank you, but I’m not sure if you understand my question (or maybe I am missing something…?)

How can I specify a color (as in ONE color) when there are two different colors, i.e. the menu item color CHANGES?

This is a default feature of the Icon stack - that the color of the menu item changes indicating which page you are on. Please see here to see what I’m talking about: http://demo.theme.co/icon-3/

Notice how the menu items change color on hover. That’s what I DON’T want. How do I eliminate the color change on hover?

[basanta]

Hi There,

Thanks for your confirmation!
There is no such setting to eliminate the hover color. You have to use custom CSS.

This is the css would elemnth the hover color and add the underline on hover.

.x-navbar .desktop .x-nav>li>a:hover>span {
    text-decoration:underline;
     color:#000; /* you can set the color here */
}
/*Keeping the current menu item color on hove */
.x-navbar .desktop .x-nav>li.current-menu-item>a:hover>span {
    text-decoration:underline;
     color: #ff8902; /* you can set the color of current menu item here */
}

if your menu color is black then no need to change the color code if it’s different please change the color code of the first class. Add your active menu item color to the second CSS.

Hope this helps!

[blog42]

Yessss! That worked perfectly.

Thank you very much!

[jade]

You’re most welcome!