Menu items underlined when hover

[riugn557]

Hi there,

Do you know how I can get the menu items to be underlined when you hover over them? I can’t seem to figure out how to do this in cornerstone…

Thank you!
LS

[Prasant]

Hello @riugn557,

Thanks for asking.

You can add following CSS under X > Theme Options > CSS to display underline on hover:

.x-menu > li > a:hover {
    border-bottom: 2px solid #ddd;
}  

Thanks.

[riugn557]

Hi Prasant,

Thank you for your help. But do you know how I can achieve the same effect as in this Pro demo (http://demo.theme.co/renew-8/)

i.e. 1) Having the underline directly underneath the menu item, rather than at the very bottom of the bar?
2) Having the underline only as wide as the word which it is underneath? (At the moment it is much wider than the words themselves…

Thank you!
LS

[jade]

Hi LS,

Thanks for writing in! To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

Thank you.

[riugn557]

Hi Jade,

Giving it to you now

Thank you,
LS

[paul.r]

Hi,

Thank you for providing your site url.

Please change the code provided above with this.

.x-menu > li > a:hover .x-anchor-text,
.x-menu > li.current-menu-item .x-anchor-text {
    border-bottom: 2px solid #ddd;
}

Hope that helps

[riugn557]

Hi Paul,

That’s great, thank you!

One last thing: I noticed that, with the code at the moment, the menu item for the page you are currently on is permanently underlined. How can I make it so that only hovered menu items are underlined?

Thank you,
LS

[jade]

Hi there,

Please try using this code instead:

.x-menu > li > a .x-anchor-text {
    transition: all 0.3s;
}

.x-menu > li > a:hover .x-anchor-text {
    box-shadow: 0 2px 0 0 #fff;
}

Hope this helps.

[riugn557]

Thank you, Jade!

[jade]

You’re most welcome.