How can I change my mega menu to a horizontal orientation in Dawn theme?

[chocolatte1234]

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/

[niraj_patel]

@chocolatte1234

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,

[PageFly-Victor]

Hi @chocolatte1234

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

[Simonsron]

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;
}

[chocolatte1234]

Amazing! Works like a charm! Thanks!