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>
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.
That's it. No sweat right? If you have problem with the code, just contact me with "chat with us"
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
Will these code changes work with Dawn 4.0?
Choosing a selection results in a full page refresh.
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
Will these code changes work with Dawn 4.0?