I have a header menu on a store that I am building. I am using the clean horizon theme. When i have a menu sub-item with a label above a certain number of characters (or pixels… not really sure) it rolls some of the characters around to a second line. This doesn’t look good because then some menu items are one line and others are two lines. everything looks fine on mobile, but not on the desktop. How would I go about changing this? See the attached image where all menu items are one line except for “Core - Precision Blanks for Shapers“. I’m not super comfortable with liquid coding, but I can copy/paste with the best of them if anyone can suggest new css code and where to paste it. Thanks!
hey @cavuboards can you please share the URL of your website
It’s not live yet. I sent a picture of what the menu looks like.
Hi @cavuboards
Welcome to the community.
Even if it is not live yet, you can share a link and password for Frontend, right?
Sending picture is ok, but to replicate we then need to check on our server, if we have test stores, add long names and try to guess your setting. As you can see that is not ideal.
But it is Horizon, though I am not sure your settings for Submenu items
But either way, try this in Custom CSS for Header section
.mega-menu__column {
grid-column: span 2;
}
By default that submenu is splited into 6 columns so maybe also try 4 desktop columns
[data-menu-list-id="MegaMenuList-2"] {
--menu-columns-desktop: 4;
--menu-columns-tablet: 4;
}
But note MegaMenuList-2 is my second menu item and will not match yours, so check that. Inspect element. Maybe there is a better way so I hope other will join.
Laza_Binaery Thank you so much! The mega-menu in the custom CSS worked perfectly. Thank you!