[Resolved] Header Menu Customisation

[GeneratePressUser]

Hello Generatepress Team,

It’s been a long time, hope you all are doing good.

Pls check the private box

[Leo]

Hi there,

This should help:
https://docs.generatepress.com/article/navigation-as-a-header/#merge-with-header-elements
https://docs.generatepress.com/article/transparent-header-and-navigation/

[GeneratePressUser]

Thanks for that Leo, can you pls tell the css to make the look proper, like you can compare both the pages the current look is not the same, specially for the login and register button and spacing and all.

[Leo]

Try adding this CSS:

@media (min-width: 769px) {
    .main-navigation li:last-child {
        margin-left: 20px;
    }
}

[GeneratePressUser]

Hey Leo,

Thanks for that. Pls see private box.

[Leo]

Can you try activate the navigation as header option first?
https://docs.generatepress.com/article/navigation-as-a-header/

Then use this method to add buttons in the navigation:
https://docs.generatepress.com/article/adding-buttons-navigation/

[GeneratePressUser]

Hey Leo,

That’s already enabled.

[Leo]

Then remove this CSS you’ve added:

.main-navigation  a:hover {
	text-decoration: underline;
}

.main-navigation {
	padding: 10px;
}

And follow the documentation for adding buttons in navigation:
https://docs.generatepress.com/article/adding-buttons-navigation/

[GeneratePressUser]

That css I am already using on the website.

[Leo]

That css I am already using on the website.

Not sure if I fully understand – it’s not what I’m asking.

Can you follow my exact instructions here?
https://generatepress.com/forums/topic/header-menu-customisation/#post-2161350

Then you can remove this CSS as well:

li#menu-item-208 {
border: 1px solid;
border-color: #366EFF;
border-radius: 5px;
}

li#menu-item-208 a:hover {
background: #366EFF;
color: #fff;
text-decoration: none;
}

li#menu-item-209 {
background: #366EFF;
color: #fff;
border-radius: 5px;
}

li#menu-item-209 a:hover {
background: #0080ff;
color: #fff;
border-radius: 5px;
text-decoration: none;
}

[GeneratePressUser]

Oops sorry I thought u told to add that, my bad, ok all done.

Now you can see just on active button the hover underline is not there as you can see in the private box image.

[GeneratePressUser]

If I remove the other css which u told here: https://generatepress.com/forums/topic/header-menu-customisation/#post-2161353

It will remove those login and register button css, I have done it for u.

[Leo]

Can you please follow my suggestions for the navigation buttons?

I’ve mentioned here:
https://generatepress.com/forums/topic/header-menu-customisation/#post-2161350

and here:
https://generatepress.com/forums/topic/header-menu-customisation/#post-2161353

Here is the link again:
https://docs.generatepress.com/article/adding-buttons-navigation/

[GeneratePressUser]

Hey Leo,

Yes that is already removed.

[Leo]

This is not done yet:
https://docs.generatepress.com/article/adding-buttons-navigation/

[Author]

Posts