I found this which was quiet helpful:

how to put close button on hamburger menu click while it is expended

Adding CSS: '\e616' to the .nav-toggle:before class changed the button to X. however, I want to keep the 3 lines when the menu is closed and only to display the X when it's expanded.

I tired adding the property to .nav-toggle:after but that didn't work.

How can I change the icon of the hamburger menu to "X" when it's expanded on mobile?

Menu Closed:

enter image description here

Menu opened:

enter image description here

Magento 2.1.8 and custom theme

1 Answer 1


You can use below css for add "X" icon when hamburger expanded on mobile. .nav-open .nav-toggle::before { content: '\e616'; }

  • on .nav-open... how could I missed that :D
    – Greg
    Apr 26, 2018 at 10:33
  • happen in sometimes :) Apr 26, 2018 at 10:35

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.