How to keep all columns the same width in a mega menu

Store Design
1

Hi guys,

My mega menu headings are overlapping into the next one - and on different monitor resolutions they all change dramatically. Can I set a constant width/size to the columns so that they keep the same and do not overlap each other, and is it possible to scale the menu to the resolution so on different monitors they dont overlap?

See image below of the problem:

Ravenwoodstore_0-1727683575273.png
Ravenwoodstore_0-1727683575273.png893×346 81.6 KB

Store: ravenwood.store

pass: moths

Thanks everyone!

2

Yes you can definitely set a width to your columns. Also you can add text-wrap: balance to css of your column or heading so that your heading will come to the next line if its width becomes greater than the column

3

Hello @Ravenwoodstore
Go to online store ---------> themes --------------> actions ------> edit code------->assets-----> component-mega-menu.css
add this code at the end of the file.

@media screen and (min-width: 768px) {
.header--top-center .mega-menu__list>li {
width: 12% !important;
}
}

result

5.png
5.png1040×833 834 KB

If this was helpful, hit the like button and accept the solution.
Thanks