Want to have menu columns instead of images on the right side of the mega menu (Impact 4.4.0 Theme)

[dreamtechzone_5]

Hello Everyone!

I am using Shopify Impact 4.4.0 theme. I want to have menu columns instead of images on the right side of the mega menu. There will be 5 menu columns per line. Please help me. Thank you.

Store: https://auz1i9fjvqv1fi8b-60604383299.shopifypreview.com

Password: Admin

Now

[Moeed]

Hey @dreamtechzone_5 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find password.liquid file

4) Add the following code in the bottom of the file above </body> tag

<style>
.mega-menu__nav {
    max-width: 100% !important;
}
</style>

RESULT

If I managed to solve your problem then, don't forget to Like it and Mark it as Solution!

Best Regards,
Moeed

[dreamtechzone_5]

I want to have 5 columns per line and keep it full width.

[Moeed · Accepted solution]

Try this code instead with the same steps mentioned above 

<style>
.mega-menu__nav {
    max-width: 75% !important;
    justify-content: center !important;
}
div#mega-menu-mega_menu_FrEa3d {
    justify-content: center !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}
</style>

RESULT

If I managed to solve your problem then, don't forget to Like it and Mark it as Solution!

Best Regards,
Moeed

[dreamtechzone_5]

Great. I want to keep the columns full width. Will this code work in Impact 4.4.0 theme? Thank you very much.

[dreamtechzone_5]

Sir, please check your msg. Thank you.

[steve_michael2]

Hello @dreamtechzone_5 

Navigate to Online Store > Themes > click on Edit code.
Locate and open the theme.css or base.css file. Scroll to the bottom and add the following CSS code:

    #mega-menu-mega_menu_FrEa3d {
       
        column-list-max-width: 100% !important;
    }

.mega-menu__nav {
    
    justify-content: center;
}

Result: