Elementors

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.

Elementor Single Page Template
Elementars Client

Elementor Community has 102,842 members. ‎ Click me first! Find time-saving resources and know our helpful rules: ‏‏‎ ‎ Help each other learn Elementor, answer. Is an Israeli software company, providing web development services. The Elementor Website builder allows WordPress users to create and edit websites by employing the drag and drop technique, with a built-in responsive mode. We recommend backing up your site regularly, and especially when experiencing technical issues. This helps with efficient troubleshooting. Also, please be advised that our support team will not be able to provide custom code snippets. The ultimate elements library for Elementor WordPress Page Builder. Premium elements with stunning design and endless customization options.

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';
}

.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(//cdn.element.how/wp-content/uploads/2019/07/logomobileme.png);
}

And this to replace the closing icon with your own

Elementor Single Page Template

.elementor-menu-toggle.elementor-active i {
max-width:40px;
content: url(//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(//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;
}

Google uses cookies and data to:

Deliver and maintain services, like tracking outages and protecting against spam, fraud, and abuse
Measure audience engagement and site statistics to understand how our services are used

If you agree, we’ll also use cookies and data to:

Improve the quality of our services and develop new ones
Deliver and measure the effectiveness of ads
Show personalized content, depending on your settings
Show personalized or generic ads, depending on your settings, on Google and across the web

For non-personalized content and ads, what you see may be influenced by things like the content you’re currently viewing and your location (ad serving is based on general location). Personalized content and ads can be based on those things and your activity like Google searches and videos you watch on YouTube. Personalized content and ads include things like more relevant results and recommendations, a customized YouTube homepage, and ads that are tailored to your interests.

Elementars Client

Click “Customize” to review options, including controls to reject the use of cookies for personalization and information about browser-level controls to reject some or all cookies for other uses. You can also visit g.co/privacytools anytime.