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

The question:

How to put the close button on hamburger menu while it is expended ?

The Solutions:

Below are the methods you can try. The first solution is probably the best. Try others if the first one doesn’t work. Senior developers aren’t just copying/pasting – they read the methods carefully & apply them wisely to each case.

Method 1

To change css of icon. Create file in your custom theme


You can refer to this file, under Mobile section


Method 2

To change the menu icon from bar to close iocn when expanded follow below steps:

create _extend.less at below location with same directory structure if not exists


Now add below css for changing bar icons to close icon

.nav-open .nav-toggle::before {
    content: 'e616';

Here in _extend.less , you can place all your custom CSS or LESS style rules.

After that run following commands if you are in developer mode while keeping cache disabled:

php bin/magento setup:upgrade

php bin/magento setup:static-content:deploy

In production mode , also run below command with above commands to take effect.

php bin/magento deploy:mode:set production

Note: Tested on LUMA theme

All methods was sourced from or, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

Leave a Comment