Hello guys!!
Today I started on a new project and the client wanted to have a slide-in menu in his website. As you already know Divi have that functionality. But.. always the same boring hamburger menu icon. Ohh.. 🙁 I am tired of it now. Okey then, let’s talk about how to change Divi hamburger menu icon to something unique

So I wanted to change it to a something new and unique one. Finally I ended up with the following design.

What you think? looks better, right?

Let me tell you how I did that. So you can do the same and have a unique menu icon in your site too. 🙂

Step One – Changing Divi hamburger menu icon 

First prepare your icons. You need two. One for opening the menu and one for closing the menu. You can create your own or download something from flaticon.com. They have a great collection of icons. Below is what I used from flaticon.com

Icon sizes should be 2x bigger. So if you want to have a 30px by 30px icon on the website yours must be 60px by 60px. Thats for Retina displays. Otherwise it will looks blurry on high resolution displays. Then re-color it to match with your header background color and export as PNG. I used Photoshop here to do the re-coloring task.

Upload the two files to your websites on WordPress dashboard.

Step Two

Next, add the below CSS code to Divi Theme Option’s Custom CSS area or WP Customizer Additional CSS area or to your child theme’s style.css file. (use any method you use to add custom css)

/*_____Custom Hamberger Icon_____*/

.mobile_menu_bar::before {
   content: "" !important;
   position: absolute;
   background: url("http://.yoursite.com/menu.png");
   background-size: 30px 30px;
   width: 30px;
   height: 30px;
}

.mobile_menu_bar::after {
   content: "" !important;
   position: absolute;
   background: url("http://.yoursite.com/close.png");
   background-size: 30px 30px;
   width: 30px;
   height: 30px;
}

Please change the background image URLs to yours. Save it. Go to the front-end and refresh. Now you will see that default Divi hamburger menu icons have changed.

Great!! You did it 🙂

If you want to add the ‘MENU’ text on the left side of the icons, similar to what I have done there, please copy-paste the below CSS code too. That will do the trick. That’s all about changing Divi hamburger menu icon to something unique guys! Congratulations 🙂

div#et-top-navigation::before {
    content: 'MENU';
    position: absolute;
    right: 65px;
    bottom: 28px;
    color: #ffffff40;
    letter-spacing: 2px;
	font-size: 12px;
}

Leave a Reply

Your email address will not be published. Required fields are marked *

Pin It on Pinterest

Share This