Shopify themes, liquid, logos, and UX
Is there a way to open the menu tree by clicking on the menu itself, not just the '+' area?
on mobile not desktop
store URL
Solved! Go to the solution
This is an accepted solution.
Hi @MohamedHegazy. Hope you are doing well. Could you please try adding this code at the end of theme.liquid file (before </body> tab) ?
<script>
document.querySelectorAll(".offcanvas__menu_item, .offcanvas__sub_menu_item").forEach(function (toggle) {
const parent = toggle.parentElement;
if (parent.querySelectorAll(".offcanvas__sub_menu_toggle").length > 0) {
toggle.addEventListener("click", function (e) {
e.preventDefault();
parent.querySelectorAll(".offcanvas__sub_menu_toggle").forEach(function (button) {
button.click();
});
});
}
});
</script>
Please let me know if it not works.
Thanks
I appreciate your help. I added the code, but the issue persists. The submenu still requires manual clicking on the "+."
Any additional suggestions?
issue persists.
Can you take a quick look at this video screen recording Please
No worry. Can you try to find mobile-nav.js (inside assets) folder of your theme code then adding my custom code here (before document.addEventListener("click", function (event) { ...) ?
Thanks
Yes, I implemented the changes, but the three dots on the right are unclickable.
I removed the code from the theme.liquid file, right?
This is an accepted solution.
Thanks a bunch for your assistance! Much appreciated!
Learn how to build powerful custom workflows in Shopify Flow with expert guidance from ...
By Jacqui May 7, 2025Did You Know? May is named after Maia, the Roman goddess of growth and flourishing! ...
By JasonH May 2, 2025Discover opportunities to improve SEO with new guidance available from Shopify’s growth...
By Jacqui May 1, 2025