Archived topic

different colour underline in primary navigation

5 replies · Started by Brian on August 23, 2019

Viewing posts 1–6 of 6

August 23, 2019 at 4:30 am #991455

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

August 23, 2019 at 6:22 am #991514

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.

August 23, 2019 at 6:34 am #991525

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

August 23, 2019 at 6:56 am #991542

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

August 23, 2019 at 10:47 am #991768

Hi David,

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

Kind Regards,

Brian Thompson

August 23, 2019 at 10:51 am #991772

Glad to be of help.

This archived topic is closed to new replies.

Start building better websites today.