Shopify dropdown menu not showing up on mobile

Shopify Discussion

Topic summary

A Shopify store owner using the Dawn theme wants to replace the default mobile drawer menu with a dropdown menu, similar to the desktop version.

Technical Solution Provided:
One responder outlined a multi-step approach involving:

  • Commenting out the drawer menu code in header.liquid
  • Duplicating desktop dropdown menu structure for mobile
  • Adding CSS media queries to control dropdown visibility
  • Implementing JavaScript for touch-friendly tap-to-toggle functionality

Current Status:
The original poster found the technical instructions difficult to understand and requested simpler guidance. They’ve shared their store URL (shop13pk.myshopify.com) and password, offering partner integration access for direct implementation assistance.

Key Concern Raised:
One participant questioned whether there’s sufficient mobile screen space for dropdown menus, suggesting this design choice may have usability implications.

The discussion remains open, awaiting either simplified instructions or hands-on implementation help.

Summarized with AI on October 28. AI used: claude-sonnet-4-5-20250929.
1

I have the Dawn theme for Shopify but it has a dropdown menu on desktop but a drawer menu on mobile. I want to get a dropdown menu on mobile. Can you help me?

2

Hi @shoppk

on mobile we don’t have space to show dropdown menu

How about the mobile space on your store? let share it with me

3

Here’s an approach to implement a dropdown-style menu on mobile:

  1. In header.liquid, find and comment out or remove the code that calls the menu-drawer component (usually inside a mobile menu toggle button).

{% comment %}
<button class=“header__icon header__icon–menu” … >
…

<menu-drawer … >
{% endcomment %}

  1. Locate the code used to render desktop dropdown menus — typically in header.liquid or component-menu.liquid — and duplicate or reuse that structure for mobile screen widths.
    {% for link in section.settings.main_menu.links %}
  • {{ link.title }} {% if link.links.size > 0 %} {% endif %}
    • {% endfor %}
  1. Add styles to control visibility and dropdown behaviour for mobile:

@media screen and (max-width: 749px) {
.mobile-submenu {
display: none;
}

.mobile-nav__item:hover > .mobile-submenu {
display: block;
}

.mobile-nav__item {
position: relative;
}

.mobile-submenu {
position: absolute;
background-color: #fff;
left: 0;
top: 100%;
z-index: 10;
}
}

  1. To make it touch-friendly, you can add a small script to toggle dropdowns on tap instead of hover:

document.querySelectorAll(‘.mobile-nav__item > a’).forEach(link => {
link.addEventListener(‘click’, function(e) {
const submenu = this.nextElementSibling;
if (submenu && submenu.classList.contains(‘mobile-submenu’)) {
e.preventDefault();
submenu.classList.toggle(‘visible’);
}
});
});

Add the .visible class in your CSS to display the dropdown.

Let me know if this works for you.

1 Like
4

I don’t understand what you’re saying.

5

Please share me your store url & password (if applicable) to let me check & give you the solution

1 Like
6

If I give you access, you will do this.

7

shop13pk.myshopify.com

I will give you the partner integration code, you send the request.

Password 5256

8

Can you tell me the easy solution to this?