{"id":23477,"date":"2022-02-19T06:00:00","date_gmt":"2022-02-19T01:00:00","guid":{"rendered":"https:\/\/mcstarters.com\/blog\/?p=23477"},"modified":"2024-03-15T16:40:43","modified_gmt":"2024-03-15T11:40:43","slug":"add-text-before-and-after-the-hamburger-icon-in-divi","status":"publish","type":"post","link":"https:\/\/mcstarters.com\/blog\/add-text-before-and-after-the-hamburger-icon-in-divi\/","title":{"rendered":"How to add text before and after the Hamburger Icon in Divi"},"content":{"rendered":"\n<p>If you want to add text before and after the hamburger icon in Divi then you need to follow the below steps. Most website owners like that to add Text \u201cMenu\u201d Next To The Divi Hamburger Menu. It helps to give clear meaning to see all pages on the mobile menu.<\/p>\n\n\n\n<p class=\"bg-blue\">Want to Learn More About <a href=\"https:\/\/www.elegantthemes.com\/affiliates\/idevaffiliate.php?id=69187&amp;tid1=mcstartersblog\" target=\"_blank\" data-type=\"URL\" data-id=\"https:\/\/www.elegantthemes.com\/affiliates\/idevaffiliate.php?id=69187&amp;tid1=mcstartersblog\" rel=\"noreferrer noopener nofollow\">Divi Builder<\/a>.<\/p>\n\n\n\n<p class=\"bg-light\">Download Free <a href=\"https:\/\/mcstarters.com\/divi-header-layouts\/\" target=\"_blank\" data-type=\"URL\" data-id=\"https:\/\/mcstarters.com\/divi-header-layouts\/\" rel=\"noreferrer noopener\">Divi Header Templates <\/a>For Websites.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"add-text-before-and-after-the-hamburger-icon-in-divi\">Add text before and after the Hamburger Icon in Divi<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"add-text-before-hamburger-icon-in-divi\"><strong>Add Text After Hamburger Icon in Divi<\/strong><\/h3>\n\n\n\n<p>Below are the simple steps you just need to follow.<\/p>\n\n\n\n<p class=\"step\"><strong>Step 1: <\/strong>Copy the below snippet.<\/p>\n\n\n\n<pre class=\"wp-block-code bg-code\"><code>.mobile_menu_bar:after {\n position: relative !important;\n content: 'MENU';\n bottom: 9px;\n left: 10%;\n color: #000000;\n}<\/code><\/pre>\n\n\n\n<p class=\"step\"><strong>Step 2:<\/strong> Got to <strong>Divi &gt; Theme Options &gt; CSS<\/strong> &gt; Paste above CSS snippet &gt; Save Changes.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"276\" src=\"https:\/\/mcstarters.com\/blog\/wp-content\/uploads\/2022\/02\/Add-Text-after-Hamburger-Icon-in-Divi.webp\" alt=\"Add Text after Hamburger Icon in Divi\" class=\"wp-image-23501\" title=\"\"><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"add-text-before-hamburger-icon-in-divi\"><strong>Add Text Before Hamburger Icon in Divi<\/strong><\/h3>\n\n\n\n<p>Below are the simple steps you just need to follow.<\/p>\n\n\n\n<p class=\"step\"><strong>Step 1: <\/strong>Copy the below snippet.<\/p>\n\n\n\n<pre class=\"wp-block-code bg-code\"><code>#et_mobile_nav_menu:before {\n    content: 'MENU';\n    font-size: 14px;\n    position: absolute !important;\n    bottom: 29px;\n    right: 35px;\n    color: #000000;\n}<\/code><\/pre>\n\n\n\n<p class=\"step\"><strong>Step 2:<\/strong> Got to <strong>Divi &gt; Theme Options &gt; CSS<\/strong> &gt; Paste above CSS snippet &gt; Save Changes.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"357\" src=\"https:\/\/mcstarters.com\/blog\/wp-content\/uploads\/2022\/02\/Add-Text-Before-Hamburger-Icon-in-Divi.webp\" alt=\"Add Text Before Hamburger Icon in Divi\" class=\"wp-image-23500\" title=\"\"><\/figure>\n\n\n\n<p>We hope you enjoy to add text before and after the hamburger icon in Divi and it&#8217;s helpful for you. But if you still need any help then comment below.<\/p>\n\n\n\n<p class=\"bg-blue\">You Might Also Want to <a href=\"https:\/\/mcstarters.com\/services\/divi-theme-experts\/\" target=\"_blank\" rel=\"noreferrer noopener\">Hire Divi Theme Expert<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>If you want to add text before and after the&#8230;<\/p>\n","protected":false},"author":5,"featured_media":23504,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kad_post_transparent":"","_kad_post_title":"","_kad_post_layout":"","_kad_post_sidebar_id":"","_kad_post_content_style":"","_kad_post_vertical_padding":"","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"_kad_post_classname":"","footnotes":""},"categories":[6,2],"tags":[],"class_list":["post-23477","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-divi","category-wordpress"],"_links":{"self":[{"href":"https:\/\/mcstarters.com\/blog\/wp-json\/wp\/v2\/posts\/23477","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=23477"}],"version-history":[{"count":0,"href":"https:\/\/mcstarters.com\/blog\/wp-json\/wp\/v2\/posts\/23477\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/mcstarters.com\/blog\/wp-json\/wp\/v2\/media\/23504"}],"wp:attachment":[{"href":"https:\/\/mcstarters.com\/blog\/wp-json\/wp\/v2\/media?parent=23477"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mcstarters.com\/blog\/wp-json\/wp\/v2\/categories?post=23477"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mcstarters.com\/blog\/wp-json\/wp\/v2\/tags?post=23477"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}