[Resolved] Mega menu not showing 4 columns

[John MacKenzie]

so i am using the mega menu it says it should be 4 columns but it only prints 3 columns i even tried to set the style mega-menu-col-4 but it didnt work, it still only shows 3 columns any ideas?

if you hover over producers.

thanks

[Elvin]

Hi,

You can add in display:flex and flex-wrap: wrap; for the CSS selector nav .main-nav .mega-menu > ul within your child theme’s style.css.

To put simply, you change this:

nav .main-nav .mega-menu > ul {
    position: absolute;
    width: 100%;
    left: 0 !important;
}

to this:

nav .main-nav .mega-menu > ul {
    position: absolute;
    width: 100%;
    left: 0 !important;    
    flex-wrap: wrap;
    display: flex;
}

Here’s how it will look like if successfully applied: https://share.getcloudapp.com/nOuDbPAp

[John MacKenzie]

thanks! next issue is when i only have 3 columns and set the css to

mega-menu-col-3

for the our wines menu, it does prnt them in 3 columns but spreads them out in the same space, how can we keep them together and just get rid of the space on the right that had the 4th column?

[David]

Hi there,

add this inside the @media query for the mega menu CSS:

nav .main-nav .mega-menu.mega-menu-col-3 > ul {
    width: 75%;
}

Adjust the % to change its width.

[John MacKenzie]

thanks that looks better but its still pretty spread out when using the sticky menu?

thanks!

[David]

Now add this CSS:

.nav-align-center .main-nav>ul {
    position: relative;
}

[John MacKenzie]

thanks!

[David]

You’re welcome

[pairfum]

Dear Elvin

Many thanks for the tip & illustration on how & where to add display:flex and flex-wrap: wrap.

It solved this issue for us as well.

Best regards,

https://www.Pairfum.com

[Author]

Posts