Change Elementor's Default Menu Icon

No extra plug-ins required! Elementor Pro Required.

Many people are wondering how to import their own icon to use as menu, or how to use text instead. Here are a few ways to modify the original hamburger icon.

This will replace the hamburger icon with the word 'MENU'.

.elementor-menu-toggle i:before {
content: "MENU";
}

This will replace the ‘X’ with the word ‘CLOSE’.

.elementor-menu-toggle.elementor-active i:before {
content: “CLOSE”;
}

Change Elementor's Default Menu Icon 2

This will replace the hamburger icon with your own icon

.elementor-menu-toggle i{
max-width:40px;
content: url(https://elementorcodes.com/wp-content/uploads/2019/07/logomobileme.png);
}

And this to replace the closing icon with your own

.elementor-menu-toggle.elementor-active i {
max-width:40px;
content: url(https://elementorcodes.com/wp-content/uploads/2019/07/email.png);
}

Change Elementor's Default Menu Icon 3

Here is another way to change the menu and closing icon if the method above doesn't work like you want.

.elementor-menu-toggle i:before {
content: “”;
display: block;
width: 40px;
height: 40px;
background: url(https://elementorcodes.com/wp-content/uploads/2019/07/logomobileme.png);
background-size: cover;
background-repeat: no-repeat;
}

.elementor-menu-toggle.elementor-active i:before {
content: “”;
display: block;
width: 40px;
height: 40px;
background: url(https://elementorcodes.com/wp-content/uploads/2019/07/email.png);
background-size: cover;
background-repeat: no-repeat;
}

4 Responses

Leave a Reply

Your email address will not be published. Required fields are marked *