Archived topic
Center logo - split menus items evenly
3 replies · Started by james on September 18, 2021
Hi guys,
I've been trying to follow the documentation for centering a logo although it's really not that intuitive - are we suppose to as a custom link with a particular class or not - to define the breakpoint?
According to another support topic it mentions "Steps" to follow in the initial guide - but there are no steps!
So overall I'm stuck, with my menu looking like the below - after following both guides (trying to make sense between both)
- I've added a custom menu item with the correct divider class (which isn't actually in your documentation but is referenced in another topic)
- I've set the menu as a header
- I've added the CSS
- I've set the menu as a Flex menu item type
You'll see how my menu looks below:
The site isn't live so I can't show you, but any indicators, and is the documentation complete (no steps or mention of a custom link)?
Thank you!
hi James,
There are many ways to do this and the documentation provides the most simple one.
But that can have issues it the number of menu items per site varies.
That's actually why this part of the CSS may be invalid on some sites.
/* Change nth-child(#) to first item to right */
.main-navigation ul li:nth-child(3) {
margin-left: auto;
}That said, can you change the # inside li:nth-child(3) to 4 or 5 and see if it moves the right number of menu items to left or right, making the logo centered?
Note: If you want to consider a split menu(2 menus, left and right) with the logo centered, you can try my suggestion here.
https://generatepress.com/forums/topic/split-menus-into-two-separate-lists/#post-1519913
Thanks Elvin, I managed to get it working eventually. Thanks for the link to your other 2 menu solution also. Have a great weekend
Nice one. Glad you got it to work. No problem. Stay safe! :D
