Divi Tutorials + Layout Kits | WordPress Tips | Business Growth

Home of the Original Divi Tutorials & Divi Layout Kits.

Divi Tutorials + Layout Kits | WordPress Tips | Business Growth

Home of the Original Divi Tutorials & Divi Layout Kits.

Tired of the boring old hamburger icon on your mobile menu? Here is an easy way to turn your Hamburger icon into a button with text.

001

0021

003

You can see it in action on here

Demo

 

The Magic of CSS

Now lets start to dazzle things up a bit with some CSS.

If you are working with a child theme you can go to Appearance>Editor and open your stylesheet. If not, go to Appearance>Divi Theme Options>ePanel>Custom CSS (which is located at the bottom of the ePanel)

If you want the menu button with text and the hamburger icon, add this CSS.


/*------------------------------------------------*/
/*---------[GQ - MOBILE MENU BUTTON 1]------------*/
/*------------------------------------------------*/

	.mobile_menu_bar:before {
    		background-color: #3e4555;
    		padding: 2px 0px 2px 2px;
    		top: 9px;
    		color: #fff!important;}
	.mobile_menu_bar::after {
    		font-family: Arial;
    		content: "MENU";
    		position: relative;
    		padding: 10px 20px 10px 5px;
    		background-color: #3e4555;
    		color: #FFFFFF!important;
		cursor: pointer;}
	.mobile_nav.opened .mobile_menu_bar:before {
		content: "\4d";}
		

 

If you want the menu button with text and no hamburger icon, add this CSS.


/*------------------------------------------------*/
/*---------[GQ - MOBILE MENU BUTTON 2]------------*/
/*------------------------------------------------*/

	.mobile_menu_bar:before {
    		display:none}
	.mobile_menu_bar::after {
    		font-family: Arial;
    		content: "MENU";
    		position: relative;
    		padding: 10px 20px 10px 20px;
    		background-color: #3e4555;
    		color: #FFFFFF!important;
		cursor: pointer;}
	.mobile_nav.opened .mobile_menu_bar:after {
		content: "CLOSE";}


 

You can make the button larger and smaller by adjusting the padding. You can also change the text to whatever you want by changing the “content”.

And that’s it! Have fun!

Credit to SJ James for showing us how change the icon to an x when it is open over at Divi.Space.


Well that’s all for now. I hope you find this article useful.


The following two tabs change content below.
Geno is an entrepreneur who has been designing websites since 1996. He also enjoys all things design, traveling, hanging out with friends, encouraging other believers, and experimenting with new technologies. When not doing any of the above, you can find Geno blogging or writing Divi customization tutorials here on Quiroz.co.

©2012-2019 Geno Quiroz | Teach Learn Build Love | Divi Expert ServicesJohn 3:16

Divi is a registered trademark of Elegant Themes, Inc. This website is not affiliated with nor endorsed by Elegant Themes.

STAY RELEVANT | BE INFORMED | SIGN UP NOW

IT DOES NOT TAKE LONG TO GET LEFT BEHIND!

You have Successfully Subscribed!

Pin It on Pinterest