Feature request for header and navigation layout

The menu item way is definitely the easiest: https://docs.generatepress.com/article/centering-logo-navigation/

Although you're right, it might not be dead center if the menu widths are drastically different.

The only other way would be to split the menus in two. You could theoretically use the secondary navigation for the second menu.

1. Remove the logo/site title/description set in Customize > Site Identity.

2. Set the primary and secondary navigation position/location to "No Navigation" in Customize > Layout > Primary/Secondary Navigation.

3. In GP Hooks, add this inside the Before Header Content hook:

<div class="grid-20 logo-area push-40">
    <div class="site-logo">
        <img src="URL TO YOUR LOGO" alt="" />
    </div>
</div>
<div class="grid-40 primary-navigation area pull-20">
    <?php generate_navigation_position(); ?>
</div>
<div class="grid-40 secondary-navigation-area">
    <?php if ( function_exists( 'generate_secondary_navigation_position' ) ) generate_secondary_navigation_position(); ?>
</div>

That should get you pretty much all the way there :)

Thanks Tom! That's grand. I'll try it out sometime this week when I've got some things out of the way and post updates here (including screenshot) so others can see what was achieved.

Couldn't ask for better support - keep up the good work! Several coffees coming your way from Splice Agency in London! :)

All the best,

Michael

Thanks for the coffees! Really appreciate it :)

Looking forward to seeing the results.

Hello Tom! I hope you're well. I've managed to find the time to revisit this. Here's a screenshot of what came out when I followed your instructions, which had unintended results that I don't fully understand. Perhaps you'll be able to point me in the right direction?

I should add a note that a secondary navigation menu would be needed later in this site's development. So if this wouldn't be possible, I would use it for one of my other projects! :)

Here's the screenshot:

Looks close! Any way you can provide the URL for me so I can take a look at the code?

Did you ever end up figuring out the solution for this? I'm about to start working on a site where the client wants the header to look like this site's. (logo needs to be centered, and her menu items won't be the same length on each side.)

thanks so much for any info!

Hello Jacks,

Thanks for popping around here to check on updates on this.

I have yet to pick up on this as the project I was working on that needed the centred logo with nav items evenly spaced to the sides of the logo has since taken up a different layout design.

I haven't had the time to revisit this again I'm sorry to say, but the solution above is pretty close.

Probably the best way going forward is for me to create a sandbox website so people can benefit from a definitive solution. I'll come back to you on this.

I've just put up a quick sandbox for this here: http://gpsandbox.wpengine.com/ (Tom - I hope you don't mind me using your GP logo!)

HTTP Auth: User: demo Pass: demodemo

This is a wireframe image of what I initially wanted to achieve:

Although yours is float-left mostly. I noticed that in this set up so far, the menu items jump around on browser resize.

Tom, shall I email you the WP-Admin creds separately if needed?

No problem! Sure, that would be great. I should be able to get it working in the sandbox, then maybe I'll make a quick tutorial on it.

Most sites I see doing this layout are simply putting the logo in a menu item, but I can see how splitting them up into two different areas like this is better.

Awesome! I've just created a user 'Tom' - you should get an email about it (support@generatepress.com)

As ever, thanks so much for your impeccable support. A tutorial would be a great idea - if people like Jacks search for an answer they can find it here too! :)

All the best,

Michael

Just set it up - all you had to do was create a new menu and set it as the Secondary menu.

Then I just styled the secondary menu like the primary menu.

I'll try to get all of the steps documented ASAP :)

Thanks so much for the follow-up on this! I suspect the info will help a lot of people.

Great job Tom!!!! Waiting for that article. I´ve been playing with this and I have doubts and problems on how to make it work on mobiles and lower resolutions screens, . Anything about this for responsive?

What should happen on mobile is you'll have two mobile menu toggles, one on top of the logo and one below.