dawn theme mega menu

How to Transform Menu to Mega Menu - hover to open in 3 East Steps

How to see the code

1. Please log in/create an account first. This is to ensure that all purchases are connected to an account and can be viewed on different devices.

2. Purchase the code using the "purchase box" on the specific page of the desired code.

3. After the purchase, please refresh the page.

One Time Purchase!

$7.00
$7.00
Only
Please refresh page after a purchase

Compatibility: Shopify 2.0 to Shopify 3.0, Dawn tpo Colorblock theme

Everyone wants to have nice hover effect on their menus. With the current settings with Shopify 3.0 themes, it is hard to obtain this without changing the HTML code. Since we are only doing the hover effect and of course in mobile, there is no such thing as hover, therefore I did not change the mobile settings.

 

To start:

1. Go to your Admin store > Themes > Actions > Edit code.

2. Under the Sections folder, open the header.liquid file and find this "header__inline-menu". From the  {%- if section.settings.menu != blank -%} to the closing {% endif %}, delete the code and replace it with the code below.

NOTE: For Dawn 4.0 and higher theme version, please follow the same instructions but when you open the theme editor, the option for mega menu and dropdown menu will not work.

With the new Dawn 5.0 update they provided a dropdown menu, make sure you delete the two {% endif %}. 

If you are unsure, please do not hesitate to contact me at "Chat with us." 

{%- if section.settings.menu != blank -%}
<nav class="header__inline-menu">
<ul class="list-menu list-menu--inline" role="list">
{%- for link in section.settings.menu.links -%}
<li>
{%- if link.links != blank -%}
<div id="Details-HeaderMenu-{{ forloop.index }}">
<div id="menuDrawer" class="header__menu-item list-menu__item link focus-inset">
<span {% if link.child_active %} class="header__active-menu-item"{% endif %}>{{ link.title | escape }} {% render 'icon-caret' %}</span>

<ul id="HeaderMenu-MenuList-{{ forloop.index }}" class="menuDrawerBox header__submenu list-menu list-menu--disclosure caption-large motion-reduce" role="list" tabindex="-1">
{%- for childlink in link.links -%}
<li>
{%- if childlink.links == blank -%}
<a href="{{ childlink.url }}" class="header__menu-item list-menu__item link link--text focus-inset caption-large{% if childlink.current %} list-menu__item--active{% endif %}"{% if childlink.current %} aria-current="page"{% endif %}>
{{ childlink.title | escape }}
</a>
{%- else -%}
<div id="Details-HeaderSubMenu-{{ forloop.index }}">
<div class="menuDrawerTitle header__menu-item link link--text list-menu__item focus-inset caption-large">
{{ childlink.title | escape }}
</div>
<ul id="HeaderMenu-SubMenuList-{{ forloop.index }}" class="menuDrawerSub header__submenu list-menu motion-reduce">
{%- for grandchildlink in childlink.links -%}
<li>
<a href="{{ grandchildlink.url }}" class="header__menu-item list-menu__item link link--text focus-inset caption-large"{% if grandchildlink.current %} aria-current="page"{% endif %}>
{{ grandchildlink.title | escape }}
</a>
</li>
{%- endfor -%}
</ul>
</div>
{%- endif -%}
</li>
{%- endfor -%}
</ul>
</div>
</div>

{%- else -%}
<a href="{{ link.url }}" class="header__menu-item header__menu-item list-menu__item link link--text focus-inset"{% if link.current %} aria-current="page"{% endif %}>
<span {% if link.current %} class="header__active-menu-item"{% endif %}>{{ link.title | escape }}</span>
</a>
{%- endif -%}
</li>
{%- endfor -%}
</ul>
</nav>

<style>
#menuDrawer:hover .header__submenu {
display: flex !important;
}
#menuDrawer::before {
content: '';
position: absolute;
height: 100%;
padding-bottom: 100px;
width: 100%;
}
#menuDrawer {
position: relative;
}
.menuDrawerBox {
gap: 10px;
background: var(--gradient-background);
}

.header__submenu {
top: 50px;
display: none;
min-width: max-content !important;
width: max-content !important;
transition: all .5s ease;
animation: dropdown-menu .5s ease forwards;
}
.menuDrawerSub {
flex-direction: column;
}

.menuDrawerTitle {
font-weight: 600;
}

@keyframes dropdown-menu {
0%{
top: 25px;
opacity: 0;
}
100%{
top: 50px;
opacity: 1;
}
}

#menuDrawer > span > svg {
width: 15px;
}
</style>
{%- endif -%}

 

3. Last thing, click SAVE.

Please see the image on what it looks like if you have more levels in your navigation. Be mindful on how many second levels you place since its going to stretch. 

mega-menu

 

That's it. No sweat right? If you have problem with the code, just contact me with "chat with us"

Copied!
Back to blog

2 comments

@CHRIS JOHNSON

There was changes done on the Dawn 4.0 Theme that would affect the header. One thing they added is a choice of mega menu and dropdown menu. The changes have not added a hover effect. Therefore, you still hove to click on those menus to see the childlink. The code still works in Dawn 4.0. I added some instructions to do so

Made4Uo

Will these code changes work with Dawn 4.0?

Chris Johnson

Leave a comment