-
I have a centered logo on my site and want to have the primary menu to the left and right of it. So basically, an image in the middle of the menu. As new menu items are added they are correctly spaced left and right of the logo automatically.
The header is an Element Block header
I have tried the Nav widget in Gutenberg but I have to manually edit them each time a new menu item needs to be added.
Thanks
-
Hi there,
If you want the menu to align correctly when adding a new menu, using the default navigation settings is likely the best approach. This article provide a way to achieve that:
https://docs.generatepress.com/article/centering-logo-navigation/
-
Thanks, how do I use that but have the menu items right align on the left and left align on the right
So still each side but close to the logo in the middle.
-
Could you provide the URL where we can view your current menu layout?
-
Sure, see below details 🙂
This is what I am trying to achieve.
EDIT: how do also get the same number of menu items each side (which you will see on the page linked in the private info)?
Thanks
-
Ok I have modified the code for the css to allow me to split the menu items, now to 7
/* Change nth-child(#) to first item to right */ .main-navigation ul li:nth-child(7) { margin-left: auto; }But that then needs me to adjust that as menu items are added or removed, which is fine for me but not necessarily for another user/admin.
Anyway it is a solution for now, thanks
-
Glad to hear that 😀
-
Sorry, I just had another thought on this one.
I still need to know how I can have the menu items load to the center like the image above.
Also how to get them to wrap properly each side on smaller screens before it uses the small 3 line menu icon.
Cheers
-
Sorry, your site URL was removed from the Private Info section when you marked this topic as resolved. Could you please add it again?
- You must be logged in to reply to this topic.