Generic selectors
Exact matches only
Search in title
Search in content
Post Type Selectors

Divi Tutorial – Change the Hamburger Icon

Learn how to change the mobile menu icon. It's actually pretty easy.

This one is simple, but really cool.

You’ll like it.

So, let’s change the mobile menu icon.

This is the mobile menu icon.

Here’s what we will get in the end

So, for starters, here’s the css code for the mobile menu icon.

.mobile_menu_bar:before {content: " ";}

What you put inside the quotation marks are what becomes the mobile menu icon.

So how do we put an icon in there?

Well you go here for the icon list..

Elegant Icons

and you find something you want to use.

Now the code part is tricky. (Sort of)

This is what the unicodes for the icons look like

The target shaped icon has the code


You are going to change the &#x to a \
and take out the ;

This gives you \5c

That goes inside the quotation marks.

like this:

.mobile_menu_bar:before {content: "\5c";}

and you’ll get a new mobile menu icon.

Bonus: You can use them in the menu as well

This reduces the need for fontawesome sometimes, and loading less stuff to do the same thing is always better.

So, start by adding a class just for the icon set.

.icons {font-family: 'ETmodules' !important;}

And now you can call any unicode icon with the class around it. Like this:

<span class="icons">&#xe0e7</span> Calculator

Just drop that in the menu title

And this is what you get!

Pretty neat, huh?

Because some kind gentleman has commented that the hamburger icon should stay, that doesn’t mean alternate hamburgers like b, c, or even a for a menu that opens to show contact info is not usable.

Also, you can totally do

.mobile_menu_bar:before {content: "\64 MENU";}

Just so the icon will say menu. Have a read here to see why adding the text MENU helps. (Click this sentence)

So yeah, have fun with this new power, and as we all know, the hamburger is ubiquitous enough that people don’t have too much trouble guessing its function. So use this tip wisely.

To learn more about CSS, check out this comprehensive course that covers everything about using CSS with Divi! (use coupon code "getcoursewith5off" for 5% off) Start learning proper CSS for Divi
To learn more about CSS, media queries, Flexbox and/or responsive web design, check out this course! (use coupon code "getcoursewith5off" for 5% off) Learn how to make Divi more responsive


    Hi! Please consider signing up for my newsletter for... the occasional email about news, updates, and special offers, including child themes and more courses. Sound interesting? The signup form is right here!

    You will also get a 10% discount coupon in your inbox as soon as you sign up!

    Reference: This link helped me with modifying the unicode: ElegantTweaks

    Photo by Lidye Petit on Unsplash

    Default image

    Hi, I'm a front-end WordPress developer, and UI/UX designer living in Australia, and I made this website to share thoughts and tips about web design and everything related to it. If you want to work with me come check out my web development agency.

    Articles: 79


    Leave a Reply

    Your email address will not be published.

    1. .mobile_menu_bar:before {content: “\64 MENU”;}
      doesn’t work… A really strang icon appears instead of ‘MENU’

      I’ve find this help site to add MENU text before hamburger icon :
      But MENU text doesn’t click to open mobile menu, just hamburger icon :-(

      PS : You have a great help for DIVI. Thanks. But I don’t receive notification email when reply to my comment.
      And sorry for my bad english, I’m a french user and french people are really bad to another language :-|

      • You’re right, I guess no one tried it. haha

        The fonts are different. the text “menu” should be in :after or something like that. Good catch.

    2. Hi … thanks for this video. I have found that there are still people who don’t know what the hamburger icon is. For them, I would like to replace the hamburger icon with the word MENU. Can you tell me how to do that? Thanks again.

      • Hi Bill, thank you for the kind words.

        Try using this CSS snippet

        .mobile_menu_bar:before {
        content: “MENU”;
        font-family: Arial;

        Of course you can change Arial to whatever font you choose.

        Hope that helps!