{"id":21013,"date":"2021-12-25T06:00:00","date_gmt":"2021-12-25T01:00:00","guid":{"rendered":"https:\/\/mcstarters.com\/blog\/?p=21013"},"modified":"2025-07-12T19:40:05","modified_gmt":"2025-07-12T14:40:05","slug":"change-elementor-default-hamburger-menu-icon","status":"publish","type":"post","link":"https:\/\/mcstarters.com\/blog\/change-elementor-default-hamburger-menu-icon\/","title":{"rendered":"How to Change Elementor Default Hamburger Menu Icon"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Elementor is a fantastic page builder, and&nbsp;it is the most popular page builder for WordPress. They have hundreds of Elementor header, footer and full page templates.<\/p>\n\n\n\n<p class=\"bg-light wp-block-paragraph\">Download Free<strong> <a href=\"https:\/\/mcstarters.com\/free-elementor-templates\/\" target=\"_blank\" data-type=\"URL\" data-id=\"https:\/\/mcstarters.com\/free-elementor-templates\/\" rel=\"noreferrer noopener\">Elementor Templates<\/a><\/strong> and Make Website in Less Time and without coding.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><a  class=\"btl_autolink_hyperlink\"  href=\"https:\/\/mcstarters.com\/blog\/elementor-pro\"    target=\"_blank\" rel=\"nofollow\">Elementor Pro<\/a> comes with a header builder. With header builder, we easily add menus, logos, and icons. But some developers want to Change Elementor Default hamburger Menu Icon into custom icons, custom images, and text.&nbsp;<\/p>\n\n\n\n<p class=\"bg-light wp-block-paragraph\">Get Best Page Builder:  <a href=\"https:\/\/mcstarters.com\/go\/elementor\" target=\"_blank\" data-type=\"URL\" data-id=\"https:\/\/mcstarters.com\/go\/elementor\" rel=\"noreferrer noopener\">Elementor Pro<\/a> <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">In this post, I will show you how to change an elementor hamburger menu icon without having to use a plugin.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"add-text-to-elementor-hamburger-menu-icon\">Add Text to Elementor Hamburger Menu Icon<\/h2>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"313\" src=\"https:\/\/mcstarters.com\/blog\/wp-content\/uploads\/2021\/12\/Add-Text-to-Elementor-Hamburger-Menu-Icon.webp\" alt=\"Add Text to Elementor Hamburger Menu Icon\" class=\"wp-image-21018\" title=\"\"><\/figure>\n\n\n\n<p class=\"step wp-block-paragraph\"><strong>Step 1:<\/strong> Copy below code and paste into Appearance &gt; Customize &gt; Additional CSS.<\/p>\n\n\n\n<p class=\"step wp-block-paragraph\"><strong>Step 2:<\/strong> You can replace &#8220;Menu&#8221; text with any text you want.<\/p>\n\n\n\n<pre class=\"wp-block-code bg-code\"><code>.elementor-menu-toggle i:before {\ncontent: 'Menu';\nfont-size:24px;\nfont-weight: 700;\n}\n.elementor-menu-toggle.elementor-active i:before {\ncontent: 'Close';\nfont-size:24px;\nfont-weight: 700;\n}\n<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Add own image icon to Elementor Hamburger Menu Icon<\/h2>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"322\" src=\"https:\/\/mcstarters.com\/blog\/wp-content\/uploads\/2021\/12\/Add-own-image-icon-to-Elementor-Hamburger-Menu-Icon.webp\" alt=\"Add own image icon to Elementor Hamburger Menu Icon\" class=\"wp-image-21017\" title=\"\"><\/figure>\n\n\n\n<p class=\"step wp-block-paragraph\"><strong>Step 1: <\/strong>Copy below code and paste into additional CSS.<\/p>\n\n\n\n<p class=\"step wp-block-paragraph\"><strong>Step 2:<\/strong> Replace image with own image Url.<\/p>\n\n\n\n<pre class=\"wp-block-code bg-code\"><code>.elementor-menu-toggle i{\nmax-width:32px;\ncontent: url(https:\/\/mcstarters.com\/blog\/wp-content\/uploads\/2021\/12\/menuicon.png);\n}\n\n.elementor-menu-toggle.elementor-active i {\nmax-width:32px;\ncontent: url(https:\/\/mcstarters.com\/blog\/wp-content\/uploads\/2021\/12\/close.png);\n}<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Add custom icon to Elementor Hamburger Menu Icon<\/h2>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"701\" height=\"318\" src=\"https:\/\/mcstarters.com\/blog\/wp-content\/uploads\/2021\/12\/Add-custom-icon-to-Elementor-Hamburger-Menu-Icon.webp\" alt=\"Add custom icon to Elementor Hamburger Menu Icon\" class=\"wp-image-21016\" title=\"\"><\/figure>\n\n\n\n<p class=\"step wp-block-paragraph\"><strong>Step 1: <\/strong>Copy below code and paste into WordPress child theme or Additional CSS.<\/p>\n\n\n\n<p class=\"step wp-block-paragraph\"><strong>Step 2:<\/strong> Get more icon code <a href=\"https:\/\/fontawesome.com\/v5\/cheatsheet\" target=\"_blank\" data-type=\"URL\" data-id=\"https:\/\/fontawesome.com\/v5\/cheatsheet\" rel=\"noreferrer noopener nofollow\">here<\/a> if you want to change icons. <\/p>\n\n\n\n<pre class=\"wp-block-code bg-code\"><code>.elementor-menu-toggle i:before{\n    font-family: \"Font Awesome 5 Free\"; \n    font-weight: 900; \n    content: \"\\f036\";\n}\n\n.elementor-menu-toggle.elementor-active i:before{\n    font-family: \"Font Awesome 5 Free\"; \n    font-weight: 900; \n    content: \"\\f038\";\n}<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Video Tutorial:<\/h2>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"How to Change Elementor Default Hamburger Menu Icon\" width=\"500\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/ui9J-PPOuyY?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">That\u2019s it! If you have any questions, feel free to comment below.<\/p>\n\n\n\n<p class=\"bg-light wp-block-paragraph\">For Problem Solution and Web Design:  <a href=\"https:\/\/mcstarters.com\/services\/elementor-expert\/\" target=\"_blank\" data-type=\"URL\" data-id=\"https:\/\/mcstarters.com\/services\/elementor-expert\/\" rel=\"noreferrer noopener\"><strong>Hire Elementor Expert<\/strong><\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Faq : Change the hamburger icon in Elementor<\/h2>\n\n\n<div id=\"rank-math-faq\" class=\"rank-math-block\">\n<div class=\"rank-math-list \">\n<div id=\"faq-question-1640148411902\" class=\"rank-math-list-item\">\n<h3 class=\"rank-math-question \">How do I change the hamburger icon in Elementor?<\/h3>\n<div class=\"rank-math-answer \">\n\n<p>You can change hamburger icon in Elementor with the help of custom code. Get custom code from this post and paste code into appearance &gt; customize &gt; custom CSS. <\/p>\n\n<\/div>\n<\/div>\n<div id=\"faq-question-1640148758390\" class=\"rank-math-list-item\">\n<h3 class=\"rank-math-question \">How do I change the menu style in Elementor?<\/h3>\n<div class=\"rank-math-answer \">\n\n<p>You can change menu style in Elementor theme builder. It is easy to use with drag and drop system. <\/p>\n\n<\/div>\n<\/div>\n<\/div>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>Elementor is a fantastic page builder, and&nbsp;it is the most popular page builder for WordPress. They have hundreds of Elementor header, footer and full page templates. Download Free Elementor Templates and Make Website in Less Time and without coding. <a  class=\"btl_autolink_hyperlink\"  href=\"https:\/\/mcstarters.com\/blog\/elementor-pro\"    target=\"_blank\" rel=\"nofollow\">Elementor Pro<\/a> comes with a header builder. With header builder, we easily add menus, logos, and [&hellip;]<\/p>\n","protected":false},"author":5,"featured_media":21019,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4],"tags":[447,448],"class_list":["post-21013","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-elementor","tag-elementor-default","tag-hamburger-menu-icons"],"_links":{"self":[{"href":"https:\/\/mcstarters.com\/blog\/wp-json\/wp\/v2\/posts\/21013","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mcstarters.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/mcstarters.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/mcstarters.com\/blog\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/mcstarters.com\/blog\/wp-json\/wp\/v2\/comments?post=21013"}],"version-history":[{"count":0,"href":"https:\/\/mcstarters.com\/blog\/wp-json\/wp\/v2\/posts\/21013\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/mcstarters.com\/blog\/wp-json\/wp\/v2\/media\/21019"}],"wp:attachment":[{"href":"https:\/\/mcstarters.com\/blog\/wp-json\/wp\/v2\/media?parent=21013"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mcstarters.com\/blog\/wp-json\/wp\/v2\/categories?post=21013"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mcstarters.com\/blog\/wp-json\/wp\/v2\/tags?post=21013"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}