How to have the MENU align center but from a exacly piont in the menu?

Hi there,

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

Can you double check?

Let me know :)

Hi

and now?

thx
Robert

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.

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

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;
    }
}