How to Change the Divi Hamburger Menu Icon

by | Jan 28, 2018 | Dark Side, Divi

Requirements:

If you want to use custom images for your Icon you will need to prepare those images first.

How is the Hamburger Menu Icon Added?

It is added via CSS.

The CSS is written in different classes depending on what menu layout is selected.

The possible layouts in Divi to get appear the Hamburger Menu Icon are: Slide In & Full Screen

Slide In Menu

The next CSS is the one adding the icons, the first piece of code add the initial state (icon for opening the menu) while the second one is for the final menu state (icon for closing the menu).

1
2
3
.mobile_menu_bar::before {
   content: "\61";
}
1
2
3
.mobile_menu_bar::after {
   content: "\4d";
}

The content CSS property is defining the icon to show.

If you want to use icons here is a link to all the icons unicode from Elegant Themes.

Once inside scroll down  until you find the title “Complete Set and Unicode Reference Guide”

Attention! From the unicode list do not grab the “” and “;”, simply grab the numbers and letters between them.

For placing the new icon just delete the 61 or the 4d and paste your numbers and letters in there.

Full Screen Menu

For the Full Screen Menu the only change is the final state icon class.

1
2
3
.et_header_style_fullscreen .et_slide_in_menu_container span.mobile_menu_bar.et_toggle_fullscreen_menu::before {
    content: "\4d";
}

Using Custom Images

Slide In Menu

Let’s grab back again the CSS for the menu and add a few lines:

1
2
3
4
5
6
7
8
.mobile_menu_bar::before {
   content: "" !important;
   background: url("myimage.png");
   background-size: 50px 50px;
   height: 50px;
   width: 50px;
   position: absolute;
}
1
2
3
4
5
6
7
8
.mobile_menu_bar::after {
   content: "" !important;
   background: url("myimage-2.png");
   background-size: 50px 50px;
   height: 50px;
   width: 50px;
   position: absolute;
}

First on the content line I took away the icon and added a !important to it.

In the background line place your image URL wrapped around the “”.

The background-size is defining the width and the height of the image.

For the last the height and width defines the size of the area for the image.

This last piece of code is just for adjust the main element to make it fit with the image. Replace the values for the same ones you used above.

1
2
3
4
.mobile_menu_bar.et_pb_header_toggle.et_toggle_slide_menu {
    height: 50px;
    width: 50px;
}

Full Screen Menu

The closing icon has a dfifferent class (same as above).

1
2
3
4
5
6
7
8
.et_header_style_fullscreen .et_slide_in_menu_container span.mobile_menu_bar.et_toggle_fullscreen_menu::before {
   content: "" !important;
   background: url("myimage-2.png");
   background-size: 50px 50px;
   height: 50px;
   width: 50px;
   position: absolute;
}

Apply the height and width to the main element.

1
2
3
4
.mobile_menu_bar.et_toggle_fullscreen_menu {
    height: 50px;
    width: 50px;
}

Adjust the values for your necessities and you are ready to go!

6 Comments

    • Nico Master

      Hey Cristopher, do you mean to make it an X while the menu is open?

      Reply
  1. Leon

    There is a problem. When adding this code it makes logo extra small. How to fix that?

    Reply
    • Nico Master

      Hey Leon, could you send a link to your site so i can check?

      Reply
    • Nico Master

      Hey Kim Im checking the site , thats the regular behaviour of the Hamburguer icon I belive. Or perhpas Im missing something?

      Reply

Submit a Comment

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

How to Cache and Boost WordPress Performance

Want to boost your site performance? Learn how to do it by activating caching in your site. With a simply and clean plugin and as always in a couple of minutes. Let’s not forget about the small extra for fixing Google Analytics!.

How to Make any Element Fixed – Divi Builder

Want to learn how to make any Section / Row / Module fixed? So whenever you scroll the element stays in there with you! Learn how to achieve this trick in a couple of minutes with R2D2 help!.

How to Maintain a WordPress Site Clean

Hello everyone, is time to talk about how can you clean your WordPress site for a better maintenance, optimization and security purposes in just a couple of minutes once again!

Follow MasterDivi on Facebook

Be updated with the latest tricks!