Columnize Specific Submenus

Support
#1

Hello,
I’m looking to figure out a way to arrange a specific submenu into 2 columns.
I have used:
.masthead-inline .x-navbar .desktop .sub-menu {
column-count: 2;
-moz-column-count: 2;
-webkit-column-count: 2;
}
(original forum thread: https://theme.co/apex/forums/topic/customize-submenu/)

But this splits all submenus into two columns. It also breaks menus nested within the submenu.

Is there a way to customize this code so that I can set it for a specific submenu, have nested menus behave, and have it so that the submenu opens to the right instead of the left?

Thank you.

Also, I don’t think ubermenu is an option as it doesn’t really fit the theme and the button I added to the menu doesn’t work with it.

#2

Hi there,

I suggest that you use the Megamenu functionality of the theme to columnize the sub menu items. For more information kindly read this article:

Hope it helps.

#3

Hi,

Thank you for your help.

Unfortunately, the megamenu is very blocky, uses differently styling (all caps, different font), the nested items with the submenu are visible, and takes up a lot more space than the original menu.

Could you help me style it so that it looks like a normal menu?

#4

Hi there,

Would you please give me specifically what aspect of the mega menu you want to style? And by the way, the second level sub menu is in direct contrast with what you want to achieve. You either need to get rid of the second level submenus or keep the menu one columned.

Thank you.

#5

So X theme doesn’t allow nested menu items in submenus if they are columnized? Even when I get rid of those nested items, the megamenu looks nothing like the normal submenu.

What I am looking for is a way to columnize a specific submenu while keeping it consistent with the theme.

The code provided from the forum thread above is close to what I want but the submenu opens to the left, covering the logo and sometimes going off screen. I need it opening to the right to avoid this issue. Another issue with this approach is that it breaks nested items, but if what you say is true, then there is nothing I can do.

The megamenu you suggested actually veered further away from what I was looking for. The megamenu completely changed the overall layout and format. It capitalized all the letters, added a ton of padding, and has a weird layout (the rows of items aren’t aligned).

Hope this explains what I am looking for.
Thank you.

#6

Hi,

Regretfully what you are trying to achieve could only be possible with custom development, but this would be outside the scope of support we can offer. You may wish to consult a developer to assist you with this. X is quite extensible with child themes, so there are plenty of possibilities.

Thanks for understanding. Take care!