Dawn Theme - creating hover menu with clickable parent menu

[AllisonMH]

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 🙂

[theycallmemakka]

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

Step 2: Search for theme.liquid file

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

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

[AllisonMH]

Thanks for the quick reply!

Unfortunately it didn't work tough

[theycallmemakka]

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.

[AllisonMH]

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

[theycallmemakka]

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

[AItorSimon]

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]

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

[Brett_Helium]

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.