Pay Less, Buy More! Get 10% OFF Sitewide. Become A Member!

Day(s)

:

Hour(s)

:

Minute(s)

:

Second(s)

Style Divi Hamburger Menu

How To Style Divi Hamburger Menu

Bored with the old Divi hamburger menu look? Try something new, style Divi hamburger menu in just 5 mins.

Welcome back to another blog post in which I am going to show how to style Divi hamburger menu in an easy way.

Before I start, have a look at what we are going to achieve.

Showcase

Looks pretty good right? Now let’s start the magic.

Copy the CSS below and paste it in the child theme or you can paste it to Divi > Theme Options > Custom CSS.

/* Styling Middle Line - Code By Divi Awesome */
.mobile_menu_bar{
	width:35px;
	height:3px;
	background:#000; /* Change the color if you are using black background */
	border-radius:20px;
	transition: all .5s ease-in-out;
}

/* Styling Top and Bottom Line - Code By Divi Awesome */
.mobile_menu_bar:before,
.mobile_menu_bar:after{
	content:'';
	height:3px;
	position:absolute;
	background:#000; /* Change the color if you are using black background */
	border-radius:20px;
	transition: all .5s ease-in-out;
}

/* Reducing width of Top Line - Code By Divi Awesome */
.mobile_menu_bar:before{
	width:30px;
	transform:translatey(-8px);
	transition: all .5s ease-in-out;
}

/* Reducing width of Bottom Line - Code By Divi Awesome */
.mobile_menu_bar:after{
	width:25px;
	transform:translatey(8px);
	transition: all .5s ease-in-out;

}

/* Sliding Middle line to the left - Code By Divi Awesome */
.mobile_nav.opened .mobile_menu_bar{
	transform:translatex(-50px);
	background:transparent;
	transition: all .5s ease-in-out;
}

/* Rotating the line once it is open - Code By Divi Awesome */
.mobile_nav.opened .mobile_menu_bar:before{
	transform:rotate(45deg) translate(35px, -35px);
	transition: all .5s ease-in-out;
}

/* Rotating the line once it is open - Code By Divi Awesome */
.mobile_nav.opened .mobile_menu_bar:after{
	transform:rotate(-45deg) translate(35px, 35px);
	transition: all .5s ease-in-out;
	width:30px;
}

/*If dropdown is overlapping hamburger use the below code*/

ul#mobile_menu2 {
    top: 30px;
}

Make sure to subscribe to our Youtube channel 

2. To make this possible we need some javascript.

Magic is not possible without javascript so let’s add some javascript and enjoy the movie.

Copy the javascript and paste it into Divi > Theme Options > Integration and paste it in Head.

<script>
	const menuBtn = document.querySelector('.mobile_menu_bar');
	let menuOpen = false;
	menuBtn.addEventListener('click',()=>{
		if(!menuOpen){
			menuBtn.classList.add('opened');
			menuOpen = true;
		}else{
			menuBtn.classList.remove('opened');
			menuOpen = false;
		}
	});
</script>

Bored? 🥱

Hit the subscribe if you love how to style Divi hamburger Menu post. See you in the next.

shop lifetime access rect

Become A Member!

Gain Access To All Layouts, Child Themes & more.

2 Comments

  1. wpdivifix

    How can I apply here wpdivifix.com this menu? I don’t want to use any js. Thanks in advance.

    Reply
    • Lovish Gulati

      Try this

      /* Styling Middle Line – Code By Divi Awesome */
      .mobile_menu_bar{
      width:35px;
      height:3px;
      background:#000; /* Change the color if you are using black background */
      border-radius:20px;
      transition: all .5s ease-in-out;
      }

      /* Styling Top and Bottom Line – Code By Divi Awesome */
      .mobile_menu_bar:before,
      .mobile_menu_bar:after{
      content:”;
      height:3px;
      position:absolute;
      background:#000; /* Change the color if you are using black background */
      border-radius:20px;
      transition: all .5s ease-in-out;
      }

      /* Reducing width of Top Line – Code By Divi Awesome */
      .mobile_menu_bar:before{
      width:30px;
      transform:translatey(-8px);
      transition: all .5s ease-in-out;
      }

      /* Reducing width of Bottom Line – Code By Divi Awesome */
      .mobile_menu_bar:after{
      width:25px;
      transform:translatey(8px);
      transition: all .5s ease-in-out;

      }

      /* Sliding Middle line to the left – Code By Divi Awesome */
      .mobile_nav.opened .mobile_menu_bar{
      transform:translatex(-50px);
      background:transparent;
      transition: all .5s ease-in-out;
      }

      /* Rotating the line once it is open – Code By Divi Awesome */
      .mobile_nav.opened .mobile_menu_bar:before{
      transform:rotate(45deg) translate(35px, -35px);
      transition: all .5s ease-in-out;
      }

      /* Rotating the line once it is open – Code By Divi Awesome */
      .mobile_nav.opened .mobile_menu_bar:after{
      transform:rotate(-45deg) translate(35px, 35px);
      transition: all .5s ease-in-out;
      width:30px;
      }

      /*If dropdown is overlapping hamburger use the below code*/

      ul#mobile_menu2 {
      top: 30px;
      }

      Reply

Submit a Comment

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

{"cart_token":"","hash":"","cart_data":""}

My cart

Your cart is empty.

Looks like you haven't made a choice yet.

preloader