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
Hey Community! As we jump into 2025, we want to give a big shout-out to all of you wh...
By JasonH Jan 7, 2025Hey Community! As the holiday season unfolds, we want to extend heartfelt thanks to a...
By JasonH Dec 6, 2024Dropshipping, a high-growth, $226 billion-dollar industry, remains a highly dynamic bus...
By JasonH Nov 27, 2024