Make mega menu list scrollable (overflow)

At the header section, add the following css

.mega-menu {

  max-height: 70vh;

  overflow-y: auto;

}

• Related Articles

• Hide mega menu links that contain 0 product

  Add the following in the mega-menu-list.liquid {% for childLink in link.links %} {% if link.type == 'collection_link' %} {% assign collection = link.object %} {% if collection.products_count > 0 %} {% assign break_after_modulo = forloop.index | ...

• Make Mega Menu Second Child Horizontal

  In the header, add in custom css as below: @media screen and (min-width: 990px) { .header--top-center .mega-menu__list { display: flex; justify-content: left; flex-wrap: wrap; column-gap: 0; } #MegaMenu-Content-1 .mega-menu__list li:nth-child(2) ...

• Make mega menu show only collection that consist of products

  In header-mega-menu.liquid and header-drawer.liquid, add the followings: {%- if childlink.object and childlink.object.products_count == 0 -%} {%- continue -%} {%- endif -%} and {%- if grandchildlink.object and grandchildlink.object.products_count == ...

• Hide menu link in mega menu when product counts = 0

  In header-mega-menu.liquid, search {%- for childlink in link.links -%} Add the following below: {%- if childlink.object and childlink.object.products_count == 0 -%} {%- continue -%} {%- endif -%} Then, search {%- for grandchildlink in childlink.links ...

• Make submenu without child horizontal

  In the header, add in the following custom css: @media only screen and (min-width: 995px) { .mega-menu__list--condensed { display: flex !important; flex-wrap: wrap; } }