Sub Menu CSS Help Needed



You should ask at your theme’s support forum. The menu CSS is the trickiest part of a theme and each one does it differently.

I agree with @joyously to ask in your theme’s support forum. They may have a better solution. However, here is the CSS that controls the submenu width:

@media only screen and (min-width: 601px)
#mega-menu-wrap-primary #mega-menu-primary li.mega-menu-megamenu > ul.mega-sub-menu > li.mega-menu-row > ul.mega-sub-menu > li.mega-menu-columns-3-of-12 {
    width: 25%;

As you can see the width is set to 25% which gives you 4 columns. If you override the width in your custom CSS or child theme style sheet and set to 33% you will get 3 columns. You could also experiment with the font-size as it is currently set to 14px which seems a little big for my taste.

IMO I would stay with the 4 column arrangement as I think it looks the best.

Source link