[Resolved] Center menu

[steven]

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)

[David]

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.

[steven]

Hi David, thanks you.

it is not possible to change in the settings ?

Thanks

[David]

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.

[steven]

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.

[David]

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:

https://www.screencast.com/t/LSB7voAX07OE

[steven]

Hi David, I don’t have saved css.
when I added it, the first time, nothing happened

[David]

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.

[steven]

Thanks you David, It’s working,:)

[David]

Glad to hear that 🙂

[Author]

Posts