Hamburger Icon and Close Icon Side by Side

Technical Q&A
, , , ,

Topic summary

A user customized the hamburger and close icons for mobile navigation in the Dawn theme but encountered an issue where both icons displayed simultaneously instead of toggling between states.

Initial Problem:

  • Both hamburger and close icons appeared side by side on page load
  • Icons failed to switch when the mobile menu was opened/closed

Solution Progression:

  1. First attempt successfully hid the duplicate close icon using CSS targeting nth-child(2) with display: none
  2. This created a new issue: the close icon disappeared entirely, even when the menu was open

Final Working Solution:
Adding CSS to the Custom CSS section in Theme Settings:

  • Hides the close icon when menu is closed: details:not([open])>.header__icon--menu svg:nth-child(2)
  • Hides the hamburger icon when menu is open: details[open]>.header__icon--menu svg:nth-child(1)

Status: Resolved. The icons now toggle correctly between states.

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

Hello, I just changed my hamburger icon and close icon for mobile to better fit the theme of my website. But now, when you load the website on mobile, the two icons appear side by side and don’t change as pictured below. I am using the Dawn theme. Can anyone help?

IMG_2777.PNG
IMG_2777.PNG1179×2556 246 KB

Hamburger Covers X(close) icon when in mobile
2

Hey @gerk201,

Thanks for Bringing this Question to Shopify community.
In order to remove the extra close icon from the header you need to follow these steps.
Go to Shopify Admin >> Online Store >> Edit code >> base.css
In the end of base.css paste the following code.

.header__icon.header__icon--menu.header__icon--summary.link.focus-inset svg:nth-child(2) {
  display: none !important;
}

Results:

image
image897×839 57.7 KB

3

Thank you, that worked! But the close icon does not appear when the menu is opened

4

Thank you, that worked! But when I open the drawer now the close icon does not appear

5

Hi @gerk201,

Please go to Customize > Theme settings > Custom CSs and add code:

details:not([open])>.header__icon--menu svg:nth-child(2), 
details[open]>.header__icon--menu svg:nth-child(1) {
        display: none;
}

If I helped you, then a Like would be truly appreciated.

1 Like
6

Thank you this worked perfect!

1 Like
7

We are happy that it’s worked for you.
Feel free to ask any Question if you need any help in the future.

1 Like
8

Hi @gerk201,

It’s my pleasure