How to customize sub-menu items on MOBILE

Topic summary

CreatorTim seeks help modifying mobile header navigation behavior for a “PRODUCTS” menu item. Currently, clicking “PRODUCTS” navigates to a separate page displaying sub-menu items.

Desired functionality (mobile only):

  • Clicking “PRODUCTS” text should navigate directly to products overview
  • A separate arrow icon should appear next to “PRODUCTS”
  • Clicking the arrow should reveal dropdown sub-menu items
  • Desktop navigation already works correctly

CreatorTim references https://tomnoske.store/ as an example (see “STORE” menu behavior).

Current status:

  • CreatorTim expresses reluctance to hire developers through platforms like Fiverr due to quality concerns
  • Farhan3 offers assistance, noting the customization requires Liquid code edits plus custom JavaScript and CSS
  • Discussion remains open with no implementation yet

The solution involves theme-level code modifications beyond Shopify’s standard editor capabilities.

Summarized with AI on November 2. AI used: claude-sonnet-4-5-20250929.

Hi @CreatorTim ,

I completely understand your frustration with Shopify’s editor and the challenges of customizing features without programming knowledge. To achieve the functionality you described for the “PRODUCTS” menu on mobile, it will require edits to your theme’s Liquid code, as well as some custom JavaScript and CSS for the dropdown behavior and styling.

I’d be happy to assist you with this customization to ensure it’s implemented exactly how you want. If you’re ready to proceed, feel free to reach out to me directly, and I’ll guide you through granting me access so we can get started right away.

Looking forward to helping you enhance your store!

Best regards,
Farhan Rifat

If this helped solve your issue, a Like and Accept as Solution would mean the world to me! ‌ If you’d like to go the extra mile, your kind Coffee Tips keep my creativity and dedication brewing! ‌ Cheers to creating awesome Shopify solutions together! ‌