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.
Learn
Animated Icons! Change the Elementor Hamburger Menu Icon
Give some life to that boring icon! Get an awesome animated hamburger menu icon!
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';
}
This will replace the hamburger icon with your own icon
.elementor-menu-toggle i{
max-width:40px;
content: url(https://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(https://cdn.element.how/wp-content/uploads/2019/07/email.png);
}
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://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(https://cdn.element.how/wp-content/uploads/2019/07/email.png);
background-size: cover;
background-repeat: no-repeat;
}
If I have my icons in png and/or svg format, saved on my computer. how to I add that url for my specific icon I am trying to use
You should put it in your theme or your site media and copy the url
Thanks, this works great! I replaced the hamburger menu with the word 'MENU' is there some way to make the word 'MENU' smaller?
Yes! Simply add font-size to the CSS!
.elementor-menu-toggle i:before {
content: 'MENU';
font-size:12px;
}
A grey box is appearing around my icon, is there a way to get rid of that?
How can i change the size of my custom icon for a mobile screen? The max width in the code is suitable for desktop but too big for mobile. The toggle button size under style doesn't change it
Hey Sam!
Just wrap the new value in a media query... add after the css you already have.
@media (max-width:767px){
.elementor-menu-toggle i{
max-width:30px;
}
}
Hey,
Thanks so much. I've wanted to get rid of that default icon for ages 🙂
Can we add some sort of easing to the transition as well, as it looks a bit strange?