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 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;
}
}