How to remove hamburger menu icon and function in mobile view?

Store Design
, ,

Topic summary

A Shopify store owner using the Refresh theme successfully hid the hamburger menu icon on mobile using CSS (display: none on .header__icon.menu-icon), but the clickable area remained functional.

Solutions provided:

  • JavaScript approach: Add a script in theme.liquid (above </body>) to remove click functionality:
document.querySelector('.header__icon.menu-icon')?.remove();
  • Enhanced CSS: Target both the icon and its interactive elements in base.css:
.header__icon.menu-icon summary {
  display: none;
  visibility: hidden;
}

Follow-up questions:

  • One user asked how to display the desktop menu view on mobile instead
  • Another requested how to apply the solution only to product pages using template conditionals ({% if template == 'product' %}), but reported it wasn’t working

The discussion remains open with these implementation questions unanswered.

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

Im using the Refresh theme in shopify. I removed the hamburger menu logo button on mobile view but when i click that area of the screen, the functionality is still there. How do I remove the functionality?

I used this code to remove the hamburger button icon in mobile view.

Pasted this at the bottom of assets/base.css

.header__icon--menu .icon
{
display: none !important;
}

Can anyone help? Thanks!

2

Hey @Battousai
Kindly share your Store URL and Password if enabled

3

Hello @Battousai

Please provide your store URL and, if it is password protected, please share the password so I can review it and provide a solution.

4

Hi! Here’s my url

https://www.gourmetdistrict.com.ph

5

Hello! Here’s my url

https://www.gourmetdistrict.com.ph

6

Hey @Battousai

Follow these Steps:

  1. Go to Online Store
  2. Edit Code
  3. Find theme.liquid file
  4. Add the following code in the bottom of the file above tag

Moeed_0-1690010173729.png
Moeed_0-1690010173729.png209×441 20.6 KB

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

1 Like
7

Hello @Battousai

You can try this code: it will be helpful to you

Go to the Online Store->Theme->Edit code->Assets->base.css>Add this code at the bottom.

summary.header__icon.header__icon--menu.header__icon--summary.link.focus-inset {
    display: none;
    visibility: hidden;
}
1 Like
8

hey this works fine but how can I have the main menu view as desktop in mobile view?

9

This is working, but i wish to apply it for my Products page only, I am trying this but its is not working:

{% if template == ‘product’ %}
{% style %}
header-drawer {
display:none;
}
{% endstyle %}
{% endif %}

Please advise