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 🙂
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.
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!
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
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.
Make the shift from discounts to donations, and witness your business not only thrive fina...By Holly Dec 4, 2023
On our Shopify Expert Marketplace, you can find many trusted third party developers and fr...By Arno Nov 27, 2023
You've downloaded the Search & Discovery app from the Shopify App store, and as you're ...By Skye Nov 8, 2023