Change hamburger menu icon when menu open/active


I have a new WEBSITE.

I created my own menu hamburger menu icon and saved it in .png. I have one for before and another one when you click on it. I saved it under my Additional CSS with a .active code.

I am sure that I messed something in my code, because the hamburger menu icon bar is not working as it should. It does not change back, when you click on it.

When the menu is not active it should be the gray icon bar, and when the menu is open, when you click on the icon, it should change to the red one. And that when you click on the icon to close the menu, the icon should change back to the gray one.

Thank you for your help & Best regards,


I am sorry, currently there is no specific CSS selector applied on the mobile menu button when the menus are shown.

However, you can add your own CSS selector by adding a jQuery click event to the button to a child theme’s JS file. Or use this plugin to apply additional scripts without a child theme.

aThemes Support