Make Mega Menu Second Child Horizontal

Make Mega Menu Second Child Horizontal

In the header, add in custom css as below:
Idea
@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) ul.list-unstyled {
    display: grid !important;
    grid-template-columns: 200px 200px 200px 200px;
  }
}

Idea
@media screen and (min-width: 990px) {
  .header--top-center .mega-menu__list {
    justify-content: left;
    column-gap: 0;
  }
  #MegaMenu-Content-1 .mega-menu__list li:nth-child(2) ul.list-unstyled {
    display: grid !important;
    grid-template-columns: 200px 200px 200px 200px;
  }
}
a[href^="/collections/sale"] {
  color: #ff0000 !important;
  font-weight: 600;
}

    • Related Articles

    • 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; } }

    • 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 parent link clickable

      Snippets > header-mega-menu.liquid (l.19-25) Parentlink {%- assign parentlink = link.links[0] -%} <a href="{{ parentlink.url }}" title="{{ parentlink.title }}"> <span {%- if link.child_active %} class="header__active-menu-item" {% endif %} > {{- ...

    • Reduce menu link padding in the footer

      In the footer section, add the following in the custom css: .list-menu__item--link { padding: 0px; }