[Resolved] make menu navigation at the center on float right nav location

[Willya]

Hi,

I would like to center my navigation menu, while the logo remains on the left and the button remains on the right.

I have follow there tutorial but not work for my case after I set sticky navigation:
https://generatepress.com/forums/topic/center-main-nav-on-page/
https://generatepress.com/forums/topic/how-to-make-navigation-menu-on-center-and-button-on-navigation-is-on-the-right/

[Fernando]

Hi Willya,

Can you try adding this through Appearance > Customize > Additional CSS?:

header.site-header .inside-header nav:not(.mobile-menu-control-wrapper) {
    flex-grow: 1;
}

header.site-header .inside-header div#primary-menu {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

header.site-header .inside-header .inside-navigation {
    position: static;
}

header.site-header .inside-header .inside-navigation .menu-bar-items {
    margin-left: auto;
}

[Willya]

Hi Fernando,

Thank you for your help. The CSS code you provide is work!

Ah, I notice that my sticky navigation is hidden when I scroll the page to the section of dark background (perhaps because I set the container outer index to 99). How to make fix it?

[Fernando]

Do you need it at a z-index of 99? If not, you can revert it to 1. That should resolve the issue.

[Willya]

Yes, I revert it to 1 and that resolved the issue. Thanks again!

[Fernando]

You’re welcome, Willya!

[Willya]

Fernando, I forgot something. I see that in other pages, the main navigation is not on the center. its is center, but only on homepage. Is it because I use transparent header on homepage so that the CSS class/ID on other pages perhaps different so that the code not works?

[Fernando]

Yes, my code is intended for the structure of the homepage only.

I updated the code I provided above now. Can you try that instead?

That should work for all pages I believe.

[Willya]

Wow! Glad to be part of the GP family : )
You are my favorite support, Fernando.

[Fernando]

You’re welcome, Willya! 🙂

[Author]

Posts