Hambuger Menu and Close Icon Issue

Store Design
, ,

Topic summary

Mobile header issues on a Shopify store: duplicate menu labels on mobile and an extra, non-functional close (X) icon in the header.

Actions taken:

  • Store URL and password were shared to enable troubleshooting.
  • CSS was proposed to hide the inline header menu on small screens via a media query. Code targets the header’s list-menu to prevent duplicate labels beside the hamburger icon.
  • CSS was also suggested to hide the close icon by targeting the generic SVG close icon selector.

Outcomes:

  • Issue 1 resolved. The mobile header no longer shows duplicate menu names after applying the media query hide rule.
  • Issue 2 remains partially unresolved. The provided selector hides all close icons across the site, not just the non-functional one, indicating the selector is too broad.

Current status and next steps:

  • Discussion open. A more specific selector is needed to target only the redundant, non-clickable close (X) in the header.
  • Screenshots (mobile and desktop) illustrate the UI issues; CSS snippets are central to understanding the attempted fixes.
Summarized with AI on December 13. AI used: gpt-5.
1

I have 2 issues.

Issue 1: Hamburger Menu

My menu names displaying same at hamburger menu and header on mobile version. I want to disappear from header.

Like this:

Screenshot 2024-12-02 at 20.15.07.png
Screenshot 2024-12-02 at 20.15.07.png1026×194 19.9 KB

Issue 2: X Icon

We have two close icon. x(Close) icon on my header but i cant disappear it. It’s unclickable and doesn’t have a function. I want to delete it.

Look like this, left one is disfunctional:

Screenshot 2024-12-02 at 20.39.46.png
Screenshot 2024-12-02 at 20.39.46.png1720×114 9.16 KB

This is mobile version:

Screenshot 2024-12-02 at 20.15.07.png
Screenshot 2024-12-02 at 20.15.07.png136×194 1.02 KB

This is desktop version:

Screenshot 2024-12-02 at 20.15.27.png
Screenshot 2024-12-02 at 20.15.27.png142×104 1.94 KB

2

Hi ,

kindly provide your store URL please and if it is password protected, please share the password as well. Thanks

3

Hi,

URL: https://1d11f0-ua.myshopify.com/

PSWD: chayrt

4

Hi @Modeer Solution for issue: 1

  1. Go to Online Store → Theme → Edit code.
  2. Open your theme.css / based.css file and paste the code in the bottom of the file.
@media(max-width:767px){
ul.list-menu.list-menu--inline {
    display: none;
  }
}

If my reply is helpful, kindly click like and mark it as an accepted solution.

If you are happy with my help, you can help me buy a COFFEE

Thanks!

5

Hi @Modeer solution for issue 2.

  1. Go to Online Store → Theme → Edit code.
  2. Open your theme.css / based.css file and paste the code in the bottom of the file.
svg.icon.icon-close {
    display: none;
}

If my reply is helpful, kindly click like and mark it as an accepted solution.

If you are happy with my help, you can help me buy a COFFEE

Thanks!

6

Thank you so much that worked. Issue 1 fixed but your second code is not worked. Because it’s deleting all close icons from site