If using the Hamburger or mobile menu icon, especially in full width desktop view instead of a standard navigation menu, you will likely want to customise it.

Will a little inspecting of the elements you will find that this is pretty simple to do.

The code below will enlarge the icon and it will bring it in slightly from the right hand edge.

/** HAMBURGER **/
.mobile_menu_bar:before {
position: relative;
top: 0;
left: -40px;
font-size: 70px !important;
content: “\61”;
cursor: pointer;
}

You will notice the ‘content:’ element is given as “/61”. This is the code for the hamburger icon or the three stacked lines.

hamburger css

If you scroll the numbers while inspecting you can select a number of different icons. Examples below…

You can find a post that includes the Complete Set and Unicode Reference Guide on this post Elegant Icon Font

We customised the Divi mobile style hamburger menu icon on the following sites:

GBL Builders

Looking to get your business seen? Then see us.

Web Site Developer Auckland | North Shore | Matakana | Warkworth | Omaha

Call 021 158 1400 for Web Design North Shore, Auckland

Share This