BLOG

Shopify Handbook

How to Replace Mega Menu with a Dropdown Menu in the Shopify Horizon Theme

Learn how to replace the Mega Menu with a compact Dropdown menu in Shopify Horizon.

In the free Horizon theme, navigation works by default in the Mega Menu format. If your catalog structure is relatively small and contains only a few links in each section, this type of menu can look bulky and leave a lot of empty space.

In this guide, we will replace the standard structure with a clean 2nd- and 3rd-level Dropdown menu without using any third-party paid apps.

Step 1: Create a New Snippet

  1. In your Shopify admin, go to Online Store → Themes.
  2. Click the ... button and select Edit code.
  3. In the left-hand panel, open the Snippets folder and click Add a new snippet.
  4. Name the file  header-menu-dropdown.liquid

Step 2: Add the Liquid and CSS Code

Paste the following code into the file you created and save your changes:

header-menu-dropdown.liquid 
{% liquid
  assign nav_menu = block.settings.menu
%}

<div class="horizon-dropdown-nav desktop-only">
  <nav class="hdr-nav" aria-label="Main Navigation">
    <ul class="hdr-nav__menu list-unstyled" role="list">
      {% for link in nav_menu.links %}
        <li class="hdr-nav__item{% if link.links.size > 0 %} has-dropdown{% endif %}">
          <a href="{{ link.url }}" class="hdr-nav__link{% if link.active %} is-active{% endif %}">
            <span>{{ link.title }}</span>

            {% if link.links.size > 0 %}
              <span class="hdr-nav__arrow" aria-hidden="true">
                <svg width="10" height="6" viewBox="0 0 10 6" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M1 1L5 5L9 1" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
              </span>
            {% endif %}
          </a>

          {% if link.links.size > 0 %}
            <div class="hdr-dropdown">
              <ul class="hdr-dropdown__menu list-unstyled" role="list">
                {% for childlink in link.links %}
                  <li class="hdr-dropdown__item{% if childlink.links.size > 0 %} has-dropdown-sub{% endif %}">
                    <a href="{{ childlink.url }}" class="hdr-dropdown__link{% if childlink.active %} is-active{% endif %}">
                      {{ childlink.title }}

                      {% if childlink.links.size > 0 %}
                        <span class="hdr-nav__arrow--sub" aria-hidden="true">›</span>
                      {% endif %}
                    </a>

                    {% if childlink.links.size > 0 %}
                      <div class="hdr-dropdown hdr-dropdown--sub">
                        <ul class="hdr-dropdown__menu list-unstyled" role="list">
                          {% for grandchildlink in childlink.links %}
                            <li>
                              <a href="{{ grandchildlink.url }}" class="hdr-dropdown__link{% if grandchildlink.active %} is-active{% endif %}">
                                {{ grandchildlink.title }}
                              </a>
                            </li>
                          {% endfor %}
                        </ul>
                      </div>
                    {% endif %}
                  </li>
                {% endfor %}
              </ul>
            </div>
          {% endif %}
        </li>
      {% endfor %}
    </ul>
  </nav>
</div>

{% stylesheet %}
.horizon-dropdown-nav {
  display: block;
}

.hdr-nav__menu {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.hdr-nav__item {
  position: relative;
  list-style: none;
}

.hdr-nav__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 12px 16px;
  color: var(--color-foreground, #121212);
  text-decoration: none;
  font-weight: 500;
  transition: opacity 0.2s ease;
}

.hdr-nav__link:hover,
.hdr-nav__link.is-active {
  opacity: 0.75;
}

.hdr-nav__arrow {
  display: inline-flex;
  transition: transform 0.25s ease;
}

.hdr-nav__item:hover > .hdr-nav__link .hdr-nav__arrow {
  transform: rotate(180deg);
}

.hdr-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 220px;
  background: var(--color-background, #ffffff);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 6px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
  padding: 8px 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: all 0.2s ease-in-out;
  z-index: 100;
}

.hdr-dropdown::before {
  content: "";
  position: absolute;
  top: -10px;
  left: 0;
  width: 100%;
  height: 10px;
}

.hdr-nav__item:hover > .hdr-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.hdr-dropdown__item {
  position: relative;
  list-style: none;
}

.hdr-dropdown__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 16px;
  color: var(--color-foreground, #121212);
  text-decoration: none;
  font-size: 0.9em;
  transition: background 0.15s ease;
}

.hdr-dropdown__link:hover {
  background: rgba(0, 0, 0, 0.04);
}

.hdr-dropdown--sub {
  top: 0;
  left: 100%;
  transform: translateX(8px);
}

.hdr-dropdown__item:hover > .hdr-dropdown--sub {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}

@media screen and (max-width: 1024px) {
  .horizon-dropdown-nav.desktop-only {
    display: none !important;
  }

  .header__drawer {
    display: flex !important;
  }

  .header__row.header__navigation-bar-row {
    display: none;
  }
}
{% endstylesheet %}

Step 3: Replace the Default Menu

  1. Go to the Blocks folder.
  2. Open the  _header-menu.liquid file
  3. Find the <div class="header-menu__inner"> markup and comment it out.
  4. Insert the call to our snippet in its place:
_header-menu.liquid 
{% comment %}
<div class="header-menu__inner">
  <nav
    class="menu-list"
    aria-label="{{ 'accessibility.header_navigation_label' | t }}"
    style="{% render 'menu-font-styles', settings: block_settings, menu_type: 'mega_menu' %}"
  >
    {% assign class = 'overflow-menu' | append: background_color_classes %}
    {% render 'overflow-list',
      class: class,
      ref: 'overflowMenu',
      children: children,
      minimum-items: 2,
      data-testid: 'header-menu-overflow-list',
      attributes: 'data-skip-node-update'
    %}
  </nav>
</div>
{% endcomment %}

{% render 'header-menu-dropdown' %}

Step 4: Align the Header Vertically

  1. Open the Assets folder.
  2. Select the  base.css file
  3. Add the following code to the very end of the file:
base.css 
.header__columns.spacing-style {
  align-items: center;
}

Need Help Setting Up Your Shopify Store?

If you need help customizing your theme, navigation, or other elements of your Shopify store, feel free to contact us:

Email: info@icestoregroup.com
Telegram: @icestoregroupshopify