Shopify dropdown menu not showing up on mobile

[shoppk]

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?

[BiDeal-Discount]

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

[shoppk]

I don't understand what you're saying.

[BiDeal-Discount]

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

[shoppk]

shop13pk.myshopify.com

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

Password 5256

[Dotsquares]

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" ... >
...
</button>
<menu-drawer ... ></menu-drawer>
{% endcomment %}

2) 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.

<ul class="mobile-nav">
{% for link in section.settings.main_menu.links %}
<li class="mobile-nav__item">
<a href="{{ link.url }}">{{ link.title }}</a>
{% if link.links.size > 0 %}
<ul class="mobile-submenu">
{% for sublink in link.links %}
<li><a href="{{ sublink.url }}">{{ sublink.title }}</a></li>
{% endfor %}
</ul>
{% endif %}
</li>
{% endfor %}
</ul>

3) 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;
}
}

4) 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.

[shoppk]

If I give you access, you will do this.

[shoppk]

 Can you tell me the easy solution to this?