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

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

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

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #1543949
    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

    #1544821
    Leo
    Staff
    Customer Support

    Hi there,

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

    Can you double check?

    Let me know 🙂

    #1544955
    Robert

    Hi

    and now?

    thx
    Robert

    #1545182
    Elvin
    Staff
    Customer Support

    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.

    A wise man once said:
    "Have you cleared your cache?"

    #1545537
    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

    #1546188
    David
    Staff
    Customer Support

    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;
        }
    }
Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.