Archived topic
Splitting the navigation and centering logo and site title
12 replies · Started by Erika on January 18, 2021
Hi there,
I saw that you just updated the article on Centering your logo in the navigation.
I followed the steps, but the menu is not splitted in the middle and the logo overlays the menu therefore. I searched the Forum, earlier there were a few other way with menu-separator-items or making two menus, etc. It looks like to be a common issue, great on updating the article. Could you take a look and tell me which settings I have to change to get the menu splitted in two halves: 4 menu items on the right, 4 menu items on the left and the logo in the middle, but on baseline with the menu (just like it looks now?)
Thanks, Erika
Hi there,
can you share a login/password to the site or remove the coming soon page?
Sorry David, turned off maintenance ;)
Find this part of the CSS:
.main-navigation ul li:nth-child(3) {
margin-left: auto;
}change :nth-child(3) to :nth-child(5)
Looks better. The right part of the navigation is however aligned more to the right. I see that the logo is in the middle. So I have a chance to set the right part closer to the logo, even if that means that the navigation is not completely centered, but more aligned to the right?
I thought about assigning to the four items on the left a class menu-item-left and to the four items on the right menu-item-right and align them like this:
.menu-item-right {
text-align:left;
}
.menu-item-left {
text-align:right;
}
Anyhow, that might be an idea: to align the left part to the right and vice versa. Same distance from the logo in the middle. Or you have another idea...
The problem is due to the varying widths of each menu item. Simply put you don't have an even layout.
For example if you could re-arrange the menu order so:
Klangschalen is before Pflanzenheilkunde then the layout works nicely.
if we try to modify the widths of individual menu items then you will have extra space in places... which doesn't look nice either.
You´re right. Looks like we go another way with the design, but it is awesome that centering the logo got so easy! Thank you again, David :)
You're welcome - yes Flexbox certainly made that a lot easier and it works with all common configurations of the header / nav and sticky :)
Thanks, I´ll play around with it ;)
Be glad to hear how it works
I close this as it is solved :)
Glad to hear that!!!
