Underline currently active nav link

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.

It's concerning the secondary menu like the example

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;
}

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?

Oops sorry try swapping :

.main-navigation .menu

for

.secondary-navigation .secondary-menu

Better ;-), thanks for helping out

You're welcome

Hi there, reopening this old topic, because I have an issue, as only some of the active links are underlined.

Apparently all BuddyPress custom links in primary navigation are not underlined, any idea why?

Is it possible to underline .bp-navs the same way?

Thanks!

Ok so some items are using the current_page_item class so you can update your CSS to include that:

@media (min-width: 769px) {
    .main-navigation .menu > .menu-item > a::after {
        content: "";
        position: absolute;
        right: 0;
        left: 50%;
        bottom: 7px;
        -webkit-transform: translate3d(-50%,0,0);
        transform: translate3d(-50%,0,0);

        display: block;
        width: 0;
        height: 2px;

        background-color: currentColor;
        transition: 0.3s width ease;
    }
    .main-navigation .menu > .menu-item.current-menu-item > a::after,
    .main-navigation .menu > .menu-item.current_page_item > a::after,
    .main-navigation .menu > .menu-item.current-menu-ancestor > a::after,
    .main-navigation .menu > .menu-item > a:hover::after {
        width: 75%;
    }
}

But the Min Profil doesn't have any class added to it when its active and it also sets the Medlemmeer to the current_page_item

You should speak to Buddy Press to see if they provide any filters to change their menus behaviour.

Thanks for the code, I can see that the class for Min profil is bp-menu bp-profile-nav,but nothing happens when I add it.
Anyway, it dosn't work out as long as the Members stays as current_page_item.

A generel question, where I can set the current page background color and text color for the Primary Navigation, I only see options for Background Navigation and Text in Global Colors?

Apparently this default color is white, but what if I choose white as background color?

Thanks!

Are you using the latest version of GP -ie. this color module:

https://docs.generatepress.com/article/global-colors-overview/

If so you should see 3 colors beside the Navigation Background option - they are Initial, Hover and Current.
You need to change the Initial

Thanks, I didn't know what the three color modules were fore before now ;-)

I can see that I'm facing the same issue with the BuddyPress custom link classes using the primary navigation initial color settings.

Glad to be of help!