- This topic has 9 replies, 2 voices, and was last updated 3 years, 3 months ago by
.
-
Posts
-
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/Customer Support
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; }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?
Do you need it at a z-index of
99? If not, you can revert it to1. That should resolve the issue.Yes, I revert it to 1 and that resolved the issue. Thanks again!
You’re welcome, 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?
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.
Wow! Glad to be part of the GP family : )
You are my favorite support, Fernando.You’re welcome, Willya! 🙂
- You must be logged in to reply to this topic.
