Header Menu Customisation

Hey Leo,

Done 2 classes added:

1) register-button-class

2) login-button-class

Now you can tell me the css for it to apply.

The CSS is already in the documentation I linked before.

You just need to replace li.nav-button with li.register-button-class.

Hey Leo,

Ok perfect its done.

Just can you tell for active underline what to do, see on homepage how underline is at bottom while on WP its not there and right below the text

Try this:

@media (min-width: 769px) {
    .main-navigation .main-nav ul li[class*="current-menu-"]:not(.register-button-class):not(.login-button-class) a {
        box-shadow: inset 0px -1px 0px 0px rgb(255 255 255);
    }
}

Sorry you wanted the underline for the active menu item so I edited the CSS above:
https://generatepress.com/forums/topic/header-menu-customisation/page/2/#post-2161368

Hey leo,

Thanks a lot man! u rock, just can you once check mobile version for both homepage and wp, there just it seems there is difference, like on homepage the menu button is on left while on wp its on right and also login register don't have that css maybe for that screen size.

Hey Leo,

OK thanks I got it, now just it seems there is difference, like on homepage the menu button is on left while on wp its on right and also login register don’t have that css maybe for that screen size.

Can you try removing the desktop-only media query from the CSS here first?
https://docs.generatepress.com/article/adding-buttons-navigation/

Then we might need to make some tweaks for mobile only.

Hey Leo,

It's done, now you can check and tell.

Try this now:

@media (max-width: 768px) {
    .main-navigation .main-nav ul li.register-button-class a,
    .main-navigation .main-nav ul li.login-button-class a {
        display: inline-block;
        margin-left: 20px;
        margin-bottom: 10px;
    }
}

You might need to tweak the CSS some more but that should be a good start.

Hey Leo,

Perfect that looks great, can u pls tell how to put the mobile menu button on left side how its on home page mobile?

So logo in the center and toggle on the left?

Can you turn on the mobile header option and upload a logo first?
https://docs.generatepress.com/article/mobile-header/

Hey Leo,

It’s done.

Try this:

.site-logo.mobile-header-logo {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 0;
    margin-left: 0;
}
.main-navigation .menu-toggle {
    line-height: 60px;
}

Hey Leo,

U rock man, thanks a lot, we are almost done just 1 small thing left now, pls see the private box.