[Support request] How to have the MENU align center but from a exacly piont in the menu?

[Robert]

Hi,

How are You?

I have on my website the align in the MENU: center.

The first 3 MENU elements are in polish, and the last 3 in germany.
– between them is an element: “|”

It would be ideal if this element “|” would be the exacly center point from the menu…

Kr
Robert

[Leo]

Hi there,

The link to your site isn’t working for me.

Can you double check?

Let me know 🙂

[Robert]

Hi

and now?

thx
Robert

[Elvin]

Hi,

You can try this CSS:

/* flex menu */
.main-nav ul{
display: flex;
}
/* Centered divider */
ul li.menu-item:nth-child(4) {
    position: absolute;
    left: 50%;
    transform: translate(-50%);
}
/* add margin separator between the 2 menus */
ul li.menu-item:nth-child(5) {
    margin-left:auto;
}

This is pretty tricky to do without having issues in making the menu items visually balanced.

[Robert]

Hi

Thx for this code – the element “|” is now perfect in the middle.

One thing more:
its passible to move the 3 MENU elements from the left more to the right, to the element “|” ?
– now between “KONTAKT” and “|” is too much space…

Kr
Robert

[David]

Hi there,

try this instead.
Remove the Menu item that contains the | and then change the CSS for this:

@media(min-width: 1024px) {
    .main-nav ul {
        display: flex;
        justify-content: center;
    }
    .main-navigation .main-nav>ul li {
        min-width: 126px;
    }

    .main-navigation .main-nav>ul li:nth-child(2) {
        min-width: 296px;
    }
    .main-navigation .main-nav > ul li:nth-child(3) a::after {
        content: '|';
        margin-left: 40px;
    }
}

[Author]

Posts