All things Shopify and commerce
Im trying convert regular dropdown menu to mega menu. previously all my menus was mega menu but i dont know how it got changed.
This is what I want, and this is how it used to be previously
This is how it is.
can someone help me to solve this.
Solved! Go to the solution
This is an accepted solution.
Hi @Giftana
1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.css / based.css file and paste the code in the bottom of the file.
@media(min-width:1025px){
ul.header__submenu.list-menu.list-menu--disclosure.list-menu--disclosure-1.caption-large.motion-reduce {
left: 100%;
right: initial;
top: 0;
min-width: calc(100vw - 450px);
padding: 0 30px 0 15px;
max-height: 90vh;
border-bottom-left-radius: 6px;
border-bottom-right-radius: 6px;
box-shadow: 0 3px 18px 2px rgb(0 0 0 / 20%);
height: -webkit-fill-available;
}
.bg_white {
display: flex;
flex-wrap: wrap;
max-width: var(--container_size) !important;
padding-left: 15px !important;
padding-right: 15px !important;
}
.bg_white li.menu-lv-item {
width: 50% !important;
}
.header__menu-vertical .no-megamenu .menu-lv-2, .header__menu-vertical .no-megamenu .menu-lv-3 {
padding: 19px 20px !important;
}
.header__menu-vertical .list-menu--disclosure .bg_white {
background: var(--bg-white);
box-shadow: 0 1px 4px 0 rgb(0 0 0 / 15%);
border-radius: 6px;
}
}
If my reply is helpful, kindly click like and mark it as an accepted solution.
If you are happy with my help, you can help me buy a COFFEE
Thanks!
This is an accepted solution.
Hi @Giftana
1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.css / based.css file and paste the code in the bottom of the file.
@media(min-width:1025px){
ul.header__submenu.list-menu.list-menu--disclosure.list-menu--disclosure-1.caption-large.motion-reduce {
left: 100%;
right: initial;
top: 0;
min-width: calc(100vw - 450px);
padding: 0 30px 0 15px;
max-height: 90vh;
border-bottom-left-radius: 6px;
border-bottom-right-radius: 6px;
box-shadow: 0 3px 18px 2px rgb(0 0 0 / 20%);
height: -webkit-fill-available;
}
.bg_white {
display: flex;
flex-wrap: wrap;
max-width: var(--container_size) !important;
padding-left: 15px !important;
padding-right: 15px !important;
}
.bg_white li.menu-lv-item {
width: 50% !important;
}
.header__menu-vertical .no-megamenu .menu-lv-2, .header__menu-vertical .no-megamenu .menu-lv-3 {
padding: 19px 20px !important;
}
.header__menu-vertical .list-menu--disclosure .bg_white {
background: var(--bg-white);
box-shadow: 0 1px 4px 0 rgb(0 0 0 / 15%);
border-radius: 6px;
}
}
If my reply is helpful, kindly click like and mark it as an accepted solution.
If you are happy with my help, you can help me buy a COFFEE
Thanks!
Thanks for the solution. but is it not working on my site
Learn how to build powerful custom workflows in Shopify Flow with expert guidance from ...
By Jacqui May 7, 2025Did You Know? May is named after Maia, the Roman goddess of growth and flourishing! ...
By JasonH May 2, 2025Discover opportunities to improve SEO with new guidance available from Shopify’s growth...
By Jacqui May 1, 2025