[Resolved] Mega Menu Width

[Ash]

Hi,

Just purhcased GP and getting stuck straight in!

I created a simple mega menu as of the documentation, I have 2 dropdowns with 5 columns so full width is fine, but first dropdown only has 2 columns so full width is a bit overkill, it there a way to auto width depending on the amount of columns or a class to set for each column?

Thanks.

[David]

Hi there,

try adding this CSS:

@media (min-width: 769px) {
    nav .main-nav .mega-menu.mega-menu-col-2 >ul {
        max-width: 50%;
    }
}

[Ash]

Great, thank you!

[David]

You’re welcome

[Ash]

Updated to GP3.0 now this doesnt work? The 2 column width is there but menu items are all in one column now, it uses two-column-menu class.

[David]

I am not seeing two sub-menu lists in the first column ? Is that still set in your Menu settings ?

[Ash]

It’s always been one list screenshot

With two-column-menu class

and

@media (min-width: 769px) {
    nav .main-nav .mega-menu.mega-menu-col-2 >ul {
        max-width: 50%;
    }
}

[David]

Sorry my bad. This CSS – can you add the !important arg as listed below :

.main-navigation li.two-column-menu > ul {
    display: grid !important;
    grid-template-columns: 50% 50%;
    width: 480px;
}

[Author]

Posts