Archived topic
Center menu
9 replies · Started by steven on October 16, 2022
Hi , I have a problem to centralize the wordpress menu. I normally use two links in my menu and both are centralized. Today I decide to add a third link in the menu and this time I have two links on the left and a link on the other. I want to centralize the three links.
Example in picture
https://ibb.co/C7kNxBy ( exemple with two links).
https://ibb.co/RzN1pVL ( exemple with three links)
Hi there,
in your Customizer > Additional CSS you have this:
@media(min-width: 769px) {
.inside-header>.site-branding,
.inside-header>.navigation-branding,
.inside-header>.site-logo,
.site-branding-container,
#site-navigation .navigation-branding .site-logo,
#sticky-navigation .navigation-branding {
position: absolute;
left: 50%;
transform: translateX(-50%);
z-index: 1000;
}
#site-navigation {
margin-left: unset !important;
display: flex;
}
.site-header .main-navigation:not(#sticky-navigation) .inside-navigation {
margin: unset;
}
#site-navigation,
#primary-menu,
.main-navigation .inside-navigation {
flex: 1;
}
/* Change nth-child(#) to first item to right */
.main-navigation ul li:nth-child(3) {
margin-left: auto;
}
}
That CSS is changing the position of the site logo and is making that menu layout.
You would need to remove it or change the CSS to suit.
Hi David, thanks you.
it is not possible to change in the settings ?
Thanks
So:
1. Remove the CSS i listed here
2. Go to Customizer > Layout > Header and:
2.1 Set the Alignment to center
2.2 Reduce your top and bottom padding.
3. Go to Customizer > Layout > Primary Navigation and set its alignment to center.
David, thank you for your message.
I tried a first time to add the css that you gave me but it does not work. That's why I asked you if there is another method. But even with the second method I can't do it.
I tried a first time to add the css that you gave me but it does not work
You need to DELETE that CSS in your customizer > additional CSS - see here it starts on line 45:
Hi David, I don't have saved css.
when I added it, the first time, nothing happened
Sorry i am confused.
I logged into your Site and went to Customizer > Additional CSS and i can see it here:
https://www.screencast.com/t/6yinHMEl
That needs to be deleted.
Thanks you David, It's working,:)
Glad to hear that :)