Mega Menu Dawn Theme Horizontal Arrangement

Technical Q&A
, ,
1

Hi I managed to make the mega menu be in a horizontal arrangement but now when I hover over the vanities section, the menu items seems to go on forever to the right and there is a scroll bar. I would like to have the menu items go to the next line if they reach the limit of the navigation bar instead of going all the way to the right.

I used this code and pasted it in base.css to make it go horizontal

ul.mega-menu__list.page-width.mega-menu__list--condensed {

    display: flex !important;

    flex-direction: row;

}

Here is how it looks like at the moment

castlefurniture_0-1701231417399.png
castlefurniture_0-1701231417399.png1562×296 25.3 KB

Here is the link to the page
https://2bb416.myshopify.com/

2

Hi @castlefurniture Thanks for providing the detail of your issue.

You need to add the given code where you have added your previous code i.e. base.css

ul.mega-menu__list.page-width.mega-menu__list--condensed {
display: flex !important;
flex-direction: row;
flex-wrap: wrap;  Comment: "just need to add this line"
}

Result:

sahilsharma9515_0-1701234793411.png
sahilsharma9515_0-1701234793411.png1920×487 42.1 KB

Hopefully it will help you. If yes then Please don’t forget hit Like and Mark it as solution!

Best Regards

Sahil

1 Like
3

Thank you that solved the problem!

1 Like
4

Welcome, if you need any other assistance please ask the same.

Best Regards

Sahil