- This topic has 24 replies, 7 voices, and was last updated 2 years, 6 months ago by Leo.
January 22, 2017 at 5:06 am #266783onlyonemj
I was wondering if there was the possibility of adding a central header logo placement with automatic equal splitting of navigation menu items (regardless of odd-or-even number) into the customiser on the roadmap? I reckon it would be an amazing addition to an amazing theme! 🙂
This is one of the most requested layout styles I get from clients when building websites.
I might be missing something but I only see a float-left/right option. I came across a solution somewhere on the forum where you could use the logo as a menu item, although I think this wouldn’t properly dead-centre the logo with other menu items spaced out evenly to the sides?January 22, 2017 at 11:35 am #266841TomLead DeveloperLead Developer
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 🙂January 23, 2017 at 11:46 am #267190onlyonemj
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,
MichaelJanuary 23, 2017 at 1:23 pm #267222TomLead DeveloperLead DeveloperMarch 1, 2017 at 6:18 pm #285896onlyonemj
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:March 1, 2017 at 9:25 pm #285952TomLead DeveloperLead DeveloperMarch 23, 2017 at 3:45 pm #296529Jacks McNamara
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!March 23, 2017 at 3:53 pm #296531onlyonemj
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.March 23, 2017 at 4:26 pm #296536onlyonemj
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?March 23, 2017 at 8:13 pm #296579TomLead DeveloperLead Developer
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.March 23, 2017 at 8:29 pm #296584onlyonemj
Awesome! I’ve just created a user ‘Tom’ – you should get an email about it (email@example.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,
MichaelMarch 24, 2017 at 8:44 pm #297066TomLead DeveloperLead Developer
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 🙂March 27, 2017 at 9:28 am #297990Jacks McNamara
Thanks so much for the follow-up on this! I suspect the info will help a lot of people.March 30, 2017 at 5:42 am #299377Antonio
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?March 30, 2017 at 10:49 am #299487TomLead DeveloperLead Developer
- You must be logged in to reply to this topic.