Divi Tutorial – Change the Hamburger Icon

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?

Edit:
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.
 
[sc name=”learn css”]
 
[sc name=”responsive-ad”]
 
[sc name=”podcast”]
 

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

Photo by Lidye Petit on Unsplash