hamburger button error on mobile (Dawn Theme)

[loolakoola]

This is mobile view. I changed my hamburger icon succesfully like 'screenshot1'. But, when I opened menu, the hamburger menu is still showing on close button. Could you please give me a hand to fix it?

url : https://104e35-2.myshopify.com/

 (screenshot1)

 (screenshot2)

[Guleria · Accepted solution]

Hello @loolakoola ,

Add this css at the bottom of base.css

.menu-opening svg {
    display: none;
}

Thanks

[Zqdo]

Try adding this code to base.css and let me know if it works:

details[open]>.header__icon--menu .icon-hamburger {
    visibility: hidden;
    opacity: 0;
    transform: scale(.8);
}

It's saying that if the menu is open, to hide the hamburger icon.

[Guleria · Accepted solution]

Hello @loolakoola ,

Add this css at the bottom of base.css

.menu-opening svg {
    display: none;
}

Thanks

[loolakoola]

But this code aslo hide every svg in menu folder like arrow. 

[queenjuni]

im having this issue too

[AliReviews · Accepted solution]

Hello @loolakoola ,

You can try to follow these steps:

• Go to Online Store -> Themes -> Actions -> Edit code 
• Go to Sections folder -> header.liquid 
• Find the HTML code for the hamburger menu: Inside the header file, locate the HTML code that generates the hamburger menu icon. It could be an <a> or <button> element with a specific class or ID that triggers the menu opening and closing.
• Modify the HTML structure: Wrap the hamburger menu icon and the close button in separate container elements, such as <div> or <span>. Here's an example of how the modified HTML structure could look:

<div class="hamburger-menu">
  <button class="hamburger-icon" aria-expanded="false" aria-controls="menu">
    <!-- Add your hamburger icon HTML code here -->
  </button>
  <button class="close-icon" aria-expanded="true" aria-controls="menu">
    <!-- Add your close button HTML code here -->
  </button>
</div>

Hope this can help.

Ali Reviews team.