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.

Important: If you want to replace the static hamburger icon, to an awesome animated hamburger icon, see this article instead.

To replace the default Elementor hamburger menu icon with something else, keep reading…

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

This will replace the hamburger icon with your own icon

.elementor-menu-toggle i{
max-width:40px;
content: url(//cdn.element.how/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(//cdn.element.how/wp-content/uploads/2019/07/email.png);
}
Change Elementor's Default Menu Icon

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(//cdn.element.how/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(//cdn.element.how/wp-content/uploads/2019/07/email.png);
background-size: cover;
background-repeat: no-repeat;
}
Tagged