Archived topic
GP 3 Main Nav Centered
9 replies · Started by Paul on September 22, 2020
With GP 3 adopting flexbox as default, how can I use main navigation as header, centered, and with the logo/nav items filling the available space evenly until the mobile header kicks in?
Thanks,
Paul.
Hi there,
Not sure if I fully understand.
Do you have an example?
Yeah apple.com or the apple developer site.
Note - I don't see any customizer options to align the nav in GP 3.
Thanks.
This should work:
https://www.screencast.com/t/YQLelstNMpFH
Can you make sure you are using the latest GP Premium 1.12 RC1?
There was a bug with the options not showing before but it should be fixed:
https://generatepress.com/gp-premium-1-12-0/
Yeah that does centre the nav but I was looking for it to expand to fill the available space, regardless of the number of menu items. I don't mind using CSS but from the examples I've found nothing has an effect.
I can't quite picture what you are wanting to do here.
Like dynamic menu item widths?
Yeah so the logo and menu items fill the container width until the breakpoint is met. Examples...
https://stackoverflow.com/questions/51248999/how-to-create-a-nav-bar-like-apple
uhh in that case wouldn't the logo always just be on the left?
What if you set the alignment to right instead, then try some CSS like this?
@media (min-width: 769px) {
.main-navigation:not(.slideout-navigation) .main-nav {
flex: 1;
}
.main-navigation ul.menu {
display: flex;
justify-content: space-between;
}
}Should be something like this:
https://www.screencast.com/t/of8Q57ARRD
Yeah that's perfect, thanks.
No problem :)
