Archived topic
Mega Menu Width
7 replies · Started by Ash on May 21, 2020
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.
Hi there,
try adding this CSS:
@media (min-width: 769px) {
nav .main-nav .mega-menu.mega-menu-col-2 >ul {
max-width: 50%;
}
}Great, thank you!
You're welcome
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.
I am not seeing two sub-menu lists in the first column ? Is that still set in your Menu settings ?
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%;
}
}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;
}