How to Change mobile menu toggle icon in elementor?

Elementor has an awesome nav menu widget. In mobile view it switches to toggle hamburger button. But unfortunately it does not have many customization options. Like we can not change the toggle menu icon. We actually can change the icon to any font awesome icon with the help of little bit CSS. Elementor now supports font awesome 5 that means we have tons of icons to choose form.
If we inspect the toggle icon we can see the icon has a class called “eicon-menu-bar”
We need to target the eicon-menu-bar after pseudo class and add some CSS
.eicon-menu-bar:before {
    font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f037";
}

First of all we need to define the font family. As we are using free version of font awesome , our font family will be “Font Awesome 5 Free”. Then we need to set our font weight and lastly we need to set the cheat code of any specific icon with in the “content”.

So from where you will get the cheat code?

Go to fontawesome website click the ‘i’ icon from the right. Now all the cheat code will show for any specific icon.
Copy the code from your icon and inset with in the css.

Your toggle icon is now changed. But if you want to change the active ‘X’ icon as well you need to target the “elementor-active” before pseudo class.

.elementor-menu-toggle.elementor-active i:before {
    content: "\f00d";
      font-family: "Font Awesome 5 Free";
}

Just change the icon cheat code here and we are good to go.

So here is the full codes

.eicon-menu-bar:before {
    font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f037";
}

.elementor-menu-toggle.elementor-active i:before {
    content: "\f00d";
      font-family: "Font Awesome 5 Free";
}

Share this post

Share on facebook
Share on twitter
Share on linkedin
Share on pinterest

Leave a Reply

Close Menu
This website uses cookies to provide you with the best service. By using our website, you agree to use the cookie. Learn More