A user sought to change their Dawn theme mega menu from vertical to horizontal orientation, where menu items were stacking vertically instead of displaying side-by-side.
Solutions Provided:
Multiple community members offered CSS-based fixes:
Option 1: Add custom CSS above </body> in theme.liquid targeting .header__inline-menu .header__menu-item ul.mega-menu__list with display: flex!important
Option 2: Insert code in base.css file targeting .mega-menu__list--condensed with display: flex and flex-direction: row
Option 3: Modify base.css with display: flex and flex-wrap: wrap for .mega-menu .mega-menu__list--condensed
All solutions involve adding flexbox properties to the mega menu list elements.
Resolution:
The original poster confirmed one of the solutions worked perfectly, resolving the issue. Screenshots were included showing the before (vertical) and after (horizontal) layouts.
Currently my mega menu has vertical orientation. So items are stacking on top of each other like this:
However I’d like it to orient horizontally like the below:
Any suggestion on how to do that? I’m using Dawn theme. Store link : https://6fa09b.myshopify.com/
Please use the below code above in theme.liquid
layout >> theme.liquid
.header__inline-menu .header__menu-item ul.mega-menu__list { display: flex!important; } .header__inline-menu .header__menu-item ul.mega-menu__list li{ width:25%!important; }after look like this,
This is Victor from PageFly - Landing Page Builder App
You can try this code by following these steps:
Step 1: Go to Online Store->Theme->Edit code.
Step 2: Search file base.css.
Step 3: Paste the below code at bottom of the file → Save
ul.mega-menu__list.page-width.mega-menu__list–condensed {
display: flex !important;
flex-direction: row;
}
Hope that my solution works for you.
Best regards,
Victor | PageFly
find base.css
.mega-menu .mega-menu__list--condensed {
display: flex;
flex-wrap:wrap;
}
.header--top-center .mega-menu__list>li {
padding-right: 2.4rem;
flex-shrink: 0;
width: auto;
}
Amazing! Works like a charm! Thanks!
