how can i convert regulary drop down to mega menu

Solved

how can i convert regulary drop down to mega menu

Giftana
Shopify Partner
5 0 0

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

Screenshot (1).png

 

This is how it is.

Screenshot (2).png

 

can someone help me to solve this.

 

Accepted Solution (1)

websensepro
Shopify Partner
1852 215 260

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!

Need a Shopify developer? Hire us at WebSensePro For Shopify Design Changes/Coding
For Free Tutorials Subscribe to our youtube
Get More Sales Using Big Bulk Discount APP
Create Your Shopify Store For Just 1$/Month
Get More Sales Using Big Bulk Discount APP

View solution in original post

Replies 2 (2)

websensepro
Shopify Partner
1852 215 260

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!

Need a Shopify developer? Hire us at WebSensePro For Shopify Design Changes/Coding
For Free Tutorials Subscribe to our youtube
Get More Sales Using Big Bulk Discount APP
Create Your Shopify Store For Just 1$/Month
Get More Sales Using Big Bulk Discount APP
Giftana
Shopify Partner
5 0 0

Thanks for the solution. but is it not working on my site