Compatibility: Shopify 2.0 FREE themes , Dawn to 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.
What you are buying:
- Hover to open header menus
- Easy to follow steps
- No javascript being use
What makes our code better:
- We do not use external libraries, with that being said, our code will have no to minimal effect to your website's speed performance
- We do not leave or add codes use to advertise for our website
- Our code is mobile friendly
Any issues related to the code will be fix with no additional cost, excluding code customization requests. Simply contact us with "Chat with us." We are just a button away.
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."
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.
That's it. No sweat right? If you have problem with the code, just contact me with "chat with us"
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?