[Resolved] GP 3 Main Nav Centered

[Paul]

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.

[Leo]

Hi there,

Not sure if I fully understand.

Do you have an example?

[Paul]

Yeah apple.com or the apple developer site.

Note – I don’t see any customizer options to align the nav in GP 3.

Thanks.

[Leo]

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/

[Paul]

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.

[Leo]

I can’t quite picture what you are wanting to do here.

Like dynamic menu item widths?

[Paul]

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

https://stackoverflow.com/questions/23226888/horizontal-list-items-fit-to-100-with-even-spacing/23226961

[Leo]

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

[Paul]

Yeah that’s perfect, thanks.

[Leo]

No problem 🙂

[Author]

Posts