Site logo

Archived topic

Center menu

9 replies · Started by steven on October 16, 2022

Viewing posts 1–10 of 10

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:

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

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

Thanks you David, It's working,:)

Glad to hear that :)

This archived topic is closed to new replies.