Mega menu not showing 4 columns

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

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?

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.

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

thanks!

Now add this CSS:

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

thanks!

You're welcome

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