how can i convert regulary drop down to mega menu

Shopify Discussion
1

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
Screenshot (1).png1366×768 243 KB

This is how it is.

Screenshot (2).png
Screenshot (2).png1366×768 268 KB

can someone help me to solve this.

2

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!

3

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