[Resolved] Mega Menu Problem

[tolis]

Hello, Look at my mega menu behavior whats happening?

[Ying]

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

[tolis]

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

[Ying]

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

[tolis]

i mean this https://prnt.sc/OVh2AI2RwmxW

[Fernando]

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.

[tolis]

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

[Ying]

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

[tolis]

thanks it worked 😉

[Ying]

You are welcome 🙂

[Author]

Posts