When I hover on the bottom-pointed arrow icon on navigation, it won’t auto display my dropdown menu as I have to click on that arrow icon to show menu items, very inconvenient. Also I can’t find an option in theme editor to fix this. Please help me, thanks!!!
Hi @raim29723 ,
Can you provide link to your store?
Hello, @raim29723 !
I would be happy to take a look and see what I can advise here.
Could you share a link to your store, and also let me know what theme you’re using?
My website https://cecichic.com/
My website https://cecichic.com/
I use Craft theme FYI
Hi @raim29723 ,
I have written custom JS to activate submenu on hover. Please add the code to your site and see if it fixes the issue.
Follow these Steps:
- Go to Online Store
- Edit Code
- Find theme.liquid file
- Add the following code just above tag
If you require further help to optimize your store, 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,
Makka
@theycallmemakka Thanks, it worked! May I ask another question? In navigation, some collections were linked to the menu bar. With the menu item that does not contain sub-menu items (example: Active wear) I can click on that to go to its collection page. However, with the menu items that contain sub-menu items, I cannot click on them to go to their collection pages (example: Daily Casual). May I know what’s the issue and is there any solution for this? Many thanks!
Hi @raim29723 ,
It’s not an issue with the Dawn theme; it is designed that way. Hover functionality does not work on mobile. Therefore, if we configure the menu (with submenu) to go to another page when clicked, we won’t be able to open the submenu on a mobile device. This is because clicking the menu will instantly redirect to the next page.
Meanwhile, please replace the previous code with this updated code. The previous code doesn’t seem to work perfectly on mobile devices, and I’ve addressed the issues in this new version.
@theycallmemakka For the first issue, yes the updated code worked fine on both mobile and desktop versions.
For the second issue, may I confirm if I use Craft theme, there is no way to click on the menu item (contains sub-menu items) to go to its own collection page? Do you suggest me to change to Dawn theme or something?
Hi @raim29723 ,
All the free theme provided by shopify has the same feature [i.e the menu with submenu doesnot open the new page]. However if you wish to add this feature on the current theme, you will have to custom code it on your theme.
I have made similar change on my testing theme. Please review it and let me know if this is something you are loking for?
@theycallmemakka that’s exactly what I’m looking for. I want the same function, please help me with custom code.
Hi @raim29723 ,
To add this, you will have to make changes on two files ‘header-drawer.liquid’ and ‘header-mega-menu.liquid’. As this changes depends on the theme/version that you are using on the site, I cannot provide exact line where the changes has to be made.
However, I will attach my updated files with this comment, do check it out. If you want me to add this changes to your site, i will require access to your store.
Changes on header-mega-menu.liquid
Changes on header-drawer.liquid
header-mega-menu.liquid
{% comment %}
Renders a megamenu for the header.
Usage:
{% render 'header-mega-menu' %}
{% endcomment %}
header-drawer.liquid
{% comment %}
Renders a header drawer menu for mobile and desktop.
Usage:
{% render 'header-drawer' %}
{% endcomment %}
Custom CSS: