Change Elementor's Default Menu Icon
Get Premium

Change Elementor's Default Menu Icon

Element.How also offers premium tutorials! Check them here:

Change Elementor's Default Menu Icon

Table of Contents

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.

No extra plug-ins required! Elementor Pro Required.

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

To replace the default Elementor hamburger menu icon with something else, follow these instructions.

Replacing the default Elementor nav icon with text

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

<script> 
/* Please login to get the code 
 * The code will be for the Change Elementor's Default Menu Icon tutorial 
 * Found at this URL https://element.how/change-elementors-default-menu-icon/ 
 */ 
</script>

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

<script> 
/* Please login to get the code 
 * The code will be for the Change Elementor's Default Menu Icon tutorial 
 * Found at this URL https://element.how/change-elementors-default-menu-icon/ 
 */ 
</script>

Change Elementor's Default Menu Icon 1

Replacing the default Elementor nav icon with your own icon

This will replace the hamburger icon with your own icon

<script> 
/* Please login to get the code 
 * The code will be for the Change Elementor's Default Menu Icon tutorial 
 * Found at this URL https://element.how/change-elementors-default-menu-icon/ 
 */ 
</script>

And this is to replace the closing icon with your own

<script> 
/* Please login to get the code 
 * The code will be for the Change Elementor's Default Menu Icon tutorial 
 * Found at this URL https://element.how/change-elementors-default-menu-icon/ 
 */ 
</script>

Change Elementor's Default Menu Icon 2

 

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

<script> 
/* Please login to get the code 
 * The code will be for the Change Elementor's Default Menu Icon tutorial 
 * Found at this URL https://element.how/change-elementors-default-menu-icon/ 
 */ 
</script>

Conclusion

I hope you have enjoyed this tutorial! Cheers!

Change Elementor's Default Menu Icon

Element.how also provides premium tutorials showing awesome advanced designs, check them out here.

Looking for something else? Search across 2927 Elements right here:

And get exclusive Elementor related discounts here

Checkout the Elementor Addon Finder directly

10 Responses

  1. 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

  2. Thanks, this works great! I replaced the hamburger menu with the word 'MENU' is there some way to make the word 'MENU' smaller?

  4. 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

    1. 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;
      }
      }

  5. 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?

    1. This is possible but a little bit out of scope for this tutorial. I might create another tutorial for this at some point...

Leave a Reply