Horizon theme megamenu to normal dropdown?

[smilingdog]

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

[Shile_001]

To change the megamenu to a normal dropdown menu, has some procedure's which must be taken place step by step.  To get this done you could reach out to this..

+1 (657) 499-7285

[Arman_ali_1 · Accepted solution]

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
%}

<div class="header-menu mobile:hidden">
<nav class="menu-list">
<ul class="menu-list__list list-unstyled">
{% for link in menu.links %}
<li class="menu-list__list-item">
<a href="{{ link.url }}" class="menu-list__link{% if link.active %} menu-list__link--active{% endif %}">
{{ link.title }}
{% if link.links != blank %}
<span class="icon-caret">
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M11 5.5L7 9.5L3 5.5" stroke="currentColor" stroke-width="var(--icon-stroke-width)" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</span>
{% endif %}
</a>
{% if link.links != blank %}
<div class="menu-list__dropdown">
<ul class="menu-list__dropdown-list">
{% for childlink in link.links %}
<li>
<a href="{{ childlink.url }}" class="menu-list__dropdown-link{% if childlink.active %} menu-list__dropdown-link--active{% endif %}">
{{ childlink.title }}
</a>
</li>
{% endfor %}
</ul>
</div>
{% endif %}
</li>
{% endfor %}
</ul>
</nav>
</div>

{% 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]

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]

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]

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

[Smadler]

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