Archived topic
Flexbox Version of Mega Menu
5 replies · Started by Michael on February 4, 2021
I followed the instructions at https://docs.generatepress.com/article/building-simple-mega-menu/ and was able to build the simple mega menu. However, when I configured it to display 5-columns, I noticed that it displays a little funky and wraps the 5th. I went to General > Structure and changed the structure from Flexbox to Floats, and the menu displays correctly but I'd like to use Flexbox. The menu provides all I require - I just want to apply some color and hover changes to the links, etc.
Assuming that is the issue, is it possible for you to provide the CSS for a flexbox version of the mega? I've included my site and the credentials in the private window.
Thanks much!
Hi Michael,
Try this CSS to stop it from wrapping:
.dropdown-click .main-navigation ul.toggled-on, .dropdown-click .main-navigation ul li.sfHover > ul.toggled-on {
display: flex;
}And this for the sub menu link color, replace the colors with yours:
body .main-navigation .main-nav ul ul li ul li a {
color: #000977;
}
body .main-navigation .main-nav ul ul li ul li a:hover {
color: #888888;
}Let me know :)
Thanks Ying. That works for the Desktop view but buggers up the mobile and tablet view which I was satisfied with. Is there a way to apply only to desktop only but leave the mobile and tablet view as it was originally?
Yes, we just need to add a media query to the CSS:
Edited CSS here:
@media (min-width: 769px) {
.dropdown-click .main-navigation ul.toggled-on, .dropdown-click .main-navigation ul li.sfHover > ul.toggled-on {
display: flex;
}
body .main-navigation .main-nav ul ul li ul li a {
color: #000977;
}
body .main-navigation .main-nav ul ul li ul li a:hover {
color: #888888;
}
}Let me know :)
Doh! Thanks for the reminder & great help Ying. Looks great.
No problem, glad to help :)
