Dawn Theme - creating hover menu with clickable parent menu

AllisonMH
New Member
5 0 0

Hi together,

 

I am currently working on my webshop and would like to change the menu.

 

Status quo: You have to click the parent menu and the drop down opens

 

Ideal scenario web: You hover over the menu and the drop down opens. Clicking on the parent menu will lead to the overview section, e.g. tableware.

 

Ideal scenario mobile: Since hover is not possible on mobile, I'm not sure which solution would be most user friendly, so I'm open to any suggestions.

 

Really hope someone can help out - currently the shop is password protected, happy to share the password on request.

 

Many thanks in advance 🙂

Replies 8 (8)

theycallmemakka
Shopify Partner
1369 304 333

Hi @AllisonMH,

 

I do have a script that makes the header on dawn theme active on hover. As header menu of dawn theme is controlled via JS, we must add few JS codes to the theme.

 

Please review the solution which i have already implemented at https://0i0ena9royd3jde3-41985048729.shopifypreview.com

 

 

Also, I would like to preview your store so that i can give further recomendations based on yout storefront. The below codes contains CSS which may require updated based on the height of the header. I had created this code which works perfectly for normal dawn theme. However, if you have already made custom changes on the header, we may need to make a few updates.

 

To implement the feature, please add bellow code to the end of theme.liquid file.

<script>
if (!navigator.userAgent.match(/Mobile|Windows Phone|Lumia|Android|webOS|iPhone|iPod|Blackberry|PlayBook|BB10|Opera Mini|\bCrMo\/|Opera Mobi|Tablet|iPad/i)) {
  document.querySelectorAll('[id^="Details-"] summary').forEach((summary) => {
    summary.addEventListener('mouseenter', (event) => {
      event.currentTarget.setAttribute('aria-expanded', !event.currentTarget.closest('details').hasAttribute('open'));
      summary.parentElement.setAttribute('open', 'true');
    });
    summary.addEventListener('mouseleave', (event) => {
      event.currentTarget.setAttribute('aria-expanded', !event.currentTarget.closest('details').hasAttribute('open'));
      summary.parentElement.removeAttribute('open');
    });
    if (summary.parentElement.querySelector('.mega-menu__content')) {
      summary.parentElement.querySelector('.mega-menu__content').addEventListener('mouseenter', (event) => {
        event.currentTarget.setAttribute('aria-expanded', !event.currentTarget.closest('details').hasAttribute('open'));
        summary.parentElement.setAttribute('open', 'true');
      });
      summary.parentElement.querySelector('.mega-menu__content').addEventListener('mouseleave', (event) => {
        event.currentTarget.setAttribute('aria-expanded', !event.currentTarget.closest('details').hasAttribute('open'));
        summary.parentElement.removeAttribute('open');
      });
    }
  });
}
</script>
<style>
  summary::after {
      content: " ";
      height: 80px;
      position: absolute;
      width: 100%;
      top: 0;
  }
</style>
 
Steps to add the code to theme.liquid
Step 1: Go to Active Theme > Edit Code
mangitma_0-1695490475472.png

 

Step 2: Search for theme.liquid file

mangitma_1-1695490518280.png

 

Step 3: Add the code just above "</body>"

mangitma_2-1695490579993.png

 

Step 4: Save the changes

 

My recomended solution for mobile device would be to keeb the default functionality of the dawn theme. Dawn theme already provides a drawer which is user friendly.

 

If you require further detailed feedback,  please don't hesitate to reach out. If you find this information useful, a Like would be greatly appreciated. And if this solves the problem, please Mark it as Solution!

 

Best Regards,
Mangit

 

Buy me a Coffee


Enjoy Shopify for $1. Sign up now


For quick response - Message Me


Ping me at: theycallmemakka@gmail.com

AllisonMH
New Member
5 0 0

Thanks for the quick reply!

 

Unfortunately it didn't work tough

theycallmemakka
Shopify Partner
1369 304 333

can you provide link to your site and the passwordd?? so that i can review why this didnt work. This works fine on my dawn theme.

Buy me a Coffee


Enjoy Shopify for $1. Sign up now


For quick response - Message Me


Ping me at: theycallmemakka@gmail.com

AllisonMH
New Member
5 0 0

I have found another code that solved the issue, thanks! 🙂

theycallmemakka
Shopify Partner
1369 304 333

Nice to hear that. Can you can provide the solution here? So that other who are having same requirement can get the solution?

Buy me a Coffee


Enjoy Shopify for $1. Sign up now


For quick response - Message Me


Ping me at: theycallmemakka@gmail.com

AItorSimon
Tourist
4 0 2

Allison if you found a solution for the Parent Link working as an actual link to another page rather than activating the dropdown could you please post it here? 
I've been looking for solutions for days. Thank you 

SJA11
Excursionist
25 0 2

Great you found the solution. Would you like to share it ?

Brett_Helium
Shopify Partner
213 40 82

Hey @AllisonMH! Sounds like you already found a solution, but just in case anyone else is looking for way to accomplish this:

One option for this (without using any code) would be to look into using a mega menu app, such as our Meteor Mega Menu app. The Meteor app allows you to build beautiful mega menus using either a hover or click trigger to activate the menus. We also automatically default to click on mobile to allow it to work correctly, since as you pointed out, hovering isn't really a thing with touchscreens.

You can check out our demo site here to view all of our template options.

Check out our app in the Shopify app store here.

Brett | Helium
Helium builds apps that thousands of merchants depend on:
- Customer Fields ✪✪✪✪✪ (330+ reviews)
- Meteor Mega Menu ✪✪✪✪✪ (250+ reviews)