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

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