A user wants to modify their mobile menu so that parent items (like “Weddings”) are directly clickable to navigate to pages, while the arrow icon expands submenus. Currently, clicking anywhere on the parent item only expands the submenu.
Current Issue:
Parent menu items on mobile aren’t clickable links—they only expand/collapse submenus
User also wants to relocate the Login button higher in the mobile menu
Proposed Solution:
A respondent suggests this is an intentional theme design choice and offers two approaches:
Recommended: Disable parent link clicking entirely and add “Shop All” sub-links instead (using “#” as placeholder URLs)
Alternative: Add custom JavaScript code to make parent items clickable while preserving expand functionality
The JavaScript solution inspects the desktop menu structure and converts mobile parent items into clickable links. Two code snippets were provided—one for functionality and one for visual styling to indicate clickability. The respondent warns this approach may confuse users since clicking items with “+” or arrow icons typically expands menus rather than navigating.
Status: Solution provided with code examples; another user has expressed interest in implementing it but needs clarification on placement.
Summarized with AI on October 31.
AI used: claude-sonnet-4-5-20250929.
I am trying to make the main parent item in my menu clickable, but all it does is expand the items underneath it. I want the main item “weddings” to be able to go directly to said page, but when someone clicks on the arrow, i want it to expand to show the other options underneath it. Is there anyway to change the direction the arrow points to so it faces down?
Additionally, im trying to move the Login button at very bottom of the page, to be higher up, preferrably in the menu as an item, but only on mobile.
That is how theme designer decided to implement the functionality. Which is kinda strange.
I’d rather disable clicking top row parent links on desktop as well and add sub-links like “Shop All”. You can easily do this by reconfiguring your menus and if link address is required for the top parents you can use # as address.
Alternatively, you can add “click” functionality to parent elements on mobile navigation.
I am not sure your visitors would not be confused by this – is it not an established pattern to click menu item with a “+” or arrow next to it to show submenu?
But it’s possible. This would require liquid modification, because theme authors do not output addresses for parents in mobile nav.
However, editing theme code will make it difficult to update the theme later.
Though one can do it with Javascript.
Here is this JS code which will inspect your desktop menu for clickable parents and convert mobile parents to links too. You can paste it into “Custom liquid” section added to your header group:
I’d also consider adding this code to better show your visitors that these are clickable link and clicking them would not expand the menu.
Does not look best, but, IMHO, better than nothing:
