Mega Menu Problem

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

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

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

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

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.

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

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

thanks it worked ;)

You are welcome :)