Horizon theme megamenu to normal dropdown?

Technical Q&A
, , ,

Topic summary

Problem: Users want to convert Horizon theme’s megamenu into a standard dropdown menu.

Initial Solution (Arman_ali_1):

  • Create a new snippet with custom dropdown code
  • Replace {%- render 'header-menu' %} in blocks/_header-menu.liquid
  • Includes Liquid markup for menu structure and CSS for dropdown styling
  • Successfully tested by multiple users for basic implementation

Improved Solution (alishahzad):

  • Original approach broke non-text menu styles (collection images, featured collections/products)
  • Conditional rendering based on menu style selection:
    • Dropdown only activates when “Text menu style” is selected
    • Other menu styles retain megamenu functionality
  • Implementation uses {% if block.settings.menu_style == 'text' %} logic

Outstanding Issue:

  • Nested submenus (third-level navigation) not displaying on hover
  • Example: Products → Women Clothes → T-shirts/Pants not appearing

Status: Partially resolved with workaround needed for multi-level dropdown support.

Summarized with AI on October 24. AI used: claude-sonnet-4-5-20250929.
3

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

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

4 Likes