[Support request] different colour underline in primary navigation

[Brian]

Hi,

Sorry to bother you,

I was wondering is it possible to have an animated underline in the primary nav, but when you hover over it, and when its active, it is a different colour?

Thank You,

Brian Thompson

[David]

Hi there,

is this the sort of thing you’re trying to achieve?

https://docs.generatepress.com/article/adding-menu-hover-animation/

Let me know and i can help with the current/active colors etc.

[Brian]

Hi David,

Yes, Thank you. Is there a possibility of li item specific colours for the different underlines? Or is that something that is can be added through the menu classes in the menus section?

Kind Regards,

Brian Thompson

[David]

Adding classes to each of your menus would be simplest, eg. custom class: bt-blue then you would add this CSS:

.main-navigation .menu > .menu-item.bt-blue > a::after {
    background-color: blue;
}

And if you wanted to style that item when its the current item you can use this selector:

.main-navigation .menu > .menu-item.current-menu-item.bt-blue > a::after

[Brian]

Hi David,

Maybe I will stick to just the animated underline as it is! Thanks for that.

Kind Regards,

Brian Thompson

[David]

Glad to be of help.

[Author]

Posts