[Resolved] Mega Menu Problem

Home Forums Support [Resolved] Mega Menu Problem

Home Forums Support Mega Menu Problem

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #2351919
    tolis

    Hello, Look at my mega menu behavior whats happening?

    #2351959
    Ying
    Staff
    Customer Support

    Hi there,

    Can you try adding this CSS?

    nav .main-nav .mega-menu > ul {
        display: none;
    }
    nav .main-nav .mega-menu:hover > ul {
        display: flex;
    }
    #2352239
    tolis

    yeah it worked thanks, one more question how to center completly my primary menu because i see its not centered correctly

    #2352696
    Ying
    Staff
    Customer Support

    Do you mean to center the main navigation on the desktop?
    https://www.screencast.com/t/kuQimoegI5zH

    Or the header which is already centered?
    https://www.screencast.com/t/LIfCSSfh107R

    #2352919
    tolis
    #2353590
    Fernando
    Customer Support

    Hi Tolis,

    Try adding this CSS:

    @media (min-width: 1025px) {
        div#primary-menu {
            position: absolute;
            left: 50%;
            
            transform: translateX(-50%);
        }
    
        div#primary-menu ul#menu-main {
            justify-content:center;
        }
    
        .menu-bar-items:before {
            width: 0 !important;
        }
    
        .menu-bar-items {
            margin-left: auto;
        }
    }

    This will only work though for Desktop screens. If you try doing this for smaller screens, the menu items would overlap.

    #2354408
    tolis

    hello, it worked but it affected my mega menu have a look

    #2354569
    Ying
    Staff
    Customer Support

    Try change this:

    div#primary-menu {
            position: absolute;
            left: 50%;
            
            transform: translateX(-50%);
        }

    to:

    div#primary-menu {
            position: absolute;
            left: 50%;
            width: 100%;
            transform: translateX(-50%);
        }

    And change this:

     div#primary-menu ul#menu-main {
            justify-content:center;
        }

    to:

    div#primary-menu ul#menu-main {
        justify-content:center;
        max-width: calc(100% - 700px);
        margin-left: auto;
        margin-right: auto;
        }
    #2355574
    tolis

    thanks it worked ๐Ÿ˜‰

    #2356977
    Ying
    Staff
    Customer Support

    You are welcome ๐Ÿ™‚

Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.