Horizon theme megamenu to normal dropdown?

smilingdog · May 22, 2025, 4:20pm

Anybody know how to change the megamenu to a normal dropdown menu in Shopify’s new Horizon theme?

Arman_ali_1 · June 4, 2025, 10:22pm

Create a new snippet and paste the code into it. Then, in blocks/_header-menu.liquid, replace {%- render ‘header-menu’ %} with the new snippet. It will work.

{% liquid
assign menu = block.settings.menu
%}

{{ link.title }} {% if link.links != blank %} {% endif %} {% if link.links != blank %}
- {{ childlink.title }}
{% endif %}

{% stylesheet %}
.menu-list__list {
gap: 20px;
font-weight: 700;
}
.menu-list__list-item {
position: relative;
}

.menu-list__dropdown {
position: absolute;
top: 100%;
left: 0;
min-width: 200px;
background: var(–color-background);
border: 1px solid var(–color-border);
border-radius: 4px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
opacity: 0;
visibility: hidden;
transform: translateY(10px);
transition: all 0.3s ease;
z-index: 1000;
}

.menu-list__list-item:hover .menu-list__dropdown {
opacity: 1;
visibility: visible;
transform: translateY(0);
}

.menu-list__dropdown-list {
list-style: none;
padding: 8px 0;
margin: 0;
}

.menu-list__dropdown-link {
display: block;
padding: 8px 16px;
color: var(–color-foreground);
text-decoration: none;
transition: background-color 0.2s ease;
}

.menu-list__dropdown-link:hover {
background-color: var(–color-background-hover);
}

.menu-list__dropdown-link–active {
font-weight: bold;
}

.icon-caret {
display: inline-block;
margin-left: 4px;
width: 12px;
height: 12px;
vertical-align: middle;
}
{% endstylesheet %}

smilingdog · June 5, 2025, 4:58pm

THANK YOU!!! Simple and concise solution and not too difficult to add back in if the theme updates. I appreciate this, and I’m sure others will as well. Cheers!

Mabinibooks · June 10, 2025, 8:14pm

Bro, I’ve tried figuring it out, copying the snippets and codes from Dawn theme and copying it to Horizon, took me some time but still could not figure it out

Thank you for this, much appreciated

Smadler · June 12, 2025, 11:19am

Hey! Its works! Thanks!! I tried 5 menu app but Your solution is simple and works well with translations

Smadler · June 12, 2025, 11:22am

Forgive me for taking advantage of the situation to ask you if you have also solved the problem of the missing SKU number on the product page? Contrary to what shopify writes, there is no option to include it

Vicky762 · August 5, 2025, 5:19am

HI, what should the new snippet be named? Thank you

alishahzad · August 22, 2025, 8:05pm

Hi @Arman_ali_1 thanks for taking the time to share your approach . I tested it, but unfortunately it didn’t work as expected in the Horizon theme. With that method:

The dropdown didn’t work properly even for the Text menu style
Other menu styles like collection images, featured collections, and featured products also stopped working

To fix this, I used a more flexible approach that checks which menu style is selected in the schema and then renders the correct snippet. This way:

The dropdown works only when Text menu style is selected
All other menu styles continue to work as intended with the mega menu

Here’s how you can implement it step by step:

Create a new snippet (you can name it custom-dropdown-menu.liquid or any name you like).
Paste below dropdown menu code inside this snippet and save it.

{% liquid  assign navItems = block.settings.menu %} 

<div class="custom-header-nav mobile:hidden">
  <nav class="nav-container">
    <ul class="nav-container__menu list-unstyled">
      {% for item in navItems.links %}
        <li class="nav-container__item">
          <a href="{{ item.url }}" class="nav-link{% if item.active %} nav-link--current{% endif %}">
            {{ item.title }}
            {% if item.links.size > 0 %}
              <span class="dropdown-toggle-icon">
                <svg width="13" height="13" viewBox="0 0 14 14" xmlns="http://www.w3.org/2000/svg" fill="none">
                  <path d="M3 5l4 4 4-4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
              </span>
            {% endif %}
          </a>

          {% if item.links.size > 0 %}
            <div class="dropdown-panel">
              <ul class="dropdown-panel__menu">
                {% for subitem in item.links %}
                  <li>
                    <a href="{{ subitem.url }}" class="dropdown-link{% if subitem.active %} dropdown-link--current{% endif %}">
                      {{ subitem.title }}
                    </a>
                  </li>
                {% endfor %}
              </ul>
            </div>
          {% endif %}
        </li>
      {% endfor %}
    </ul>
  </nav>
</div>

{% stylesheet %}
.nav-container__menu {
  display: flex;
  gap: 2rem;
  list-style: none; 
  margin: 0;
  padding: 0;
}

.nav-container__item {
  position: relative;
  list-style: none; 
}

.nav-link {
  text-decoration: none;
  color: var(--color-foreground);
  padding: 8px 0;
  display: inline-block;
}

.nav-link--current {

}

.dropdown-toggle-icon {
  margin-left: 6px;
  display: inline-block;
  vertical-align: middle;
  width: 12px;
  height: 12px;
}

.dropdown-panel {
  position: absolute;
  top: calc(100% + 5px);
  left: 0;
  min-width: 220px;
  background: var(--color-background);
  border-radius: 6px;
  border: 1px solid rgba(0,0,0,0.08);
  box-shadow: 0 8px 12px rgba(0, 0, 0, 0.1);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: all 0.25s ease-in-out;
  z-index: 10;
}

.nav-container__item:hover .dropdown-panel {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.dropdown-panel__menu {
  padding: 10px 0;
  margin: 0;
  list-style: none; 
}

.dropdown-panel__menu li {
  list-style: none;
  margin: 0;
  padding: 0;
}

.dropdown-link {
  display: block;
  padding: 10px 16px;
  color: var(--color-foreground);
  text-decoration: none;
  transition: background 0.2s ease;
}

.dropdown-link:hover {
  background: var(--color-background-hover);
}

.dropdown-link--current {
}
{% endstylesheet %}

Go to your theme blocks folder and open the _header-menu.liquid file.
Inside it, search for this line:
{%- render ‘header-menu’ -%}
Replace this code

<div class="header-menu__inner">
        {%- render 'header-menu' %}
      </div>

with the following code:

<div class="header-menu__inner">
  {% if block.settings.menu_style == 'text' %}
    {% comment %} for dropdown menu {% endcomment %}
    {%- render 'custom-dropdown-menu' -%} 
  {% else %}
    {%- render 'header-menu' -%}
  {% endif %}
</div>

That’s it — now the dropdown menu will only load when Text menu style is selected, and the mega menu will continue working for all other menu styles .

meli9 · September 18, 2025, 2:40pm

Hey, I tried this and it worked, thank you. Though, another problem appeared and I hope you could help me with it. So the dropdown menu works like i want it, but the submenus are not working… For example I click “products” and my dropdown menu shows, I want to hover over “Women clothes” and expect to see the submenus like “T-shirts” “Pants” “Underwear” etc etc, but they’re not showing.. Sorry for my bad explanation, english is not my first language.. Thanks for helping =)

Topic		Replies	Views
How to create a horizontal dropdown in my mega menu? Technical Q&A shopify-theme	9	55	April 9, 2023
Header mega menu and small menu dropdown: Dawn Store Design menu , header	4	27	December 20, 2023
Main navigation menu drop down not working on desktop. Debut Theme Store Design	25	272	September 15, 2023
Dropdown Menüansicht ändern Technische Fragen & Antworten	5	16	May 18, 2021
How to Get a Horizontal nested drop down menu in Dawn Theme? Store Design	4	34	February 2, 2022

Horizon theme megamenu to normal dropdown?

Related topics