Add underline

[ferlo61]

Hi team,
It’s possible add underline on Ubermenu in top level item only?
Thank you
Massimo

[rad]

Hi Massimo,

Thanks for reaching out.

Are you referring to highlight menu? If yes then please check this https://sevenspark.com/docs/ubermenu-current-menu-item

But instead of background, you’ll apply border or box-shadow https://www.w3schools.com/cssref/pr_border-bottom.asp. Example,

#megaMenu ul.megaMenu > li.menu-item.current-menu-item > a,
#megaMenu ul.megaMenu > li.menu-item.current-menu-item > span.um-anchoremulator{
 border-bottom: 5px solid red;
}

Ubermenu documentation covers all the customization here https://sevenspark.com/docs/ubermenu-customize

Cheers!

[ferlo61]

Thank you Rad,
I’m not refer to highlight menu but a little line under or above the single item.
Thank you again
Massimo

[rad]

Hi Massimo,

If it’s not the highlight and above or under every single menu, isn’t the same as adding a long continues line since it’s permanent there? But yes, you can do that with this CSS.

.ubermenu-main .ubermenu-item-level-0>.ubermenu-target {
    border-bottom: 2px solid red;
}

Hope this helps.

[ferlo61]

Excuse me Rad but I have forget that the line show on hover.
Thank you again
Massimo

[ruenel]

Hey Massimo,

Do you want to change the color as you hover the menu item? If that is the case, you can use this code:

.ubermenu-main .ubermenu-item-level-0:hover >.ubermenu-target {
    border-top: 5px solid green;
}

Please let us know if this works out for you.

[ferlo61]

Work very well,
thank you!
Massimo

[christian]

You’re welcome, Massimo. We’re happy that we’re able to help.