- This topic has 8 replies, 4 voices, and was last updated 3 years, 3 months ago by
.
-
Posts
-
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
Customer Support
Hi,
You can add in
display:flexandflex-wrap: wrap;for the CSS selectornav .main-nav .mega-menu > ulwithin 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?
Customer Support
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,
- You must be logged in to reply to this topic.
