Underline currently active nav link

[Carsten]

Hi there, instead of having a current background of my secondary menu, which is the only option, I would like to have an underline like in this example, but I’m not sure how to achieve this?

View post on imgur.com

Regards

[David]

Hi there,

if it is the primary nav then this doc provides an example:

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

It applies to current item as well as hover and can easily adapted.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Carsten]

It’s concerning the secondary menu like the example

[David]

then you would swap out .main-navigation for .secondary-navigation in that CSS.

Or something simple like:

.secondary-navigation li:hover,
.secondary-navigation li.current-menu-item {
    border-bottom: 2px solid red;
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Carsten]

Thanks, the simple code is working.

I have tried the more advanced ‘Adding Menu Hover Animation’ code, you linked, and have substituted .main-navigation with .secondary-navigation, but the animation does not work.

Is there anything else I should change or add to the code, to make it work?

[David]

Oops sorry try swapping :

.main-navigation .menu

for

.secondary-navigation .secondary-menu

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Carsten]

Better ;-), thanks for helping out

[David]

You’re welcome

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts