How to convert WordPress standard menus to CSS burger menu?

Hey, guys let’s start a very basic program. It’s a very common requirement as a developer while developing a custom WordPress theme.

The HTML/CSS burger menus style is very common requirement nowadays, especially for the mobile browser.

So let’s start the coding part.

Here are very basic coding snippets, which helps you to quickly resolve your problem.

CSS

#burgerMenu {
	   /* activate this display:none property if you want disable burger menu for desktop view */
	  /* display:none; */
	  background-color:#000;
	  height:40px;
	  position: relative; /* if you want make menu fix at page top. Use position:fixed instead of position:relative */
	}
	#menuToggle {
	  display: block;
	  opacity:1.0;
	  top: 10px;
	  left: 20px;
	  position: relative;
	  z-index: 35;
	  -webkit-user-select: none;
	  user-select: none;
	}
	#menuToggle input {
	  display: block;
	  width: 40px;
	  height: 32px;
	  position: absolute;
	  top: -7px;
	  left: -5px;
	  cursor: pointer;
	  opacity: 0; /* hide this */
	  z-index: 2; /* and place it over the hamburger */
	  -webkit-touch-callout: none;
	}
	/*
	 * Just a quick hamburger
	*/
	#menuToggle span {
	  display: block;
	  width: 33px;
	  height: 4px;
	  margin-bottom: 5px;
	  position: relative;
	  background: #cdcdcd;
	  border-radius: 3px;
	  z-index: 1;
	  transform-origin: 4px 0px;
	  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
	  background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
	  opacity 0.55s ease;
	}
	#menuToggle span:first-child {
	  transform-origin: 0% 0%;
	}
	#menuToggle span:nth-last-child(2){
	  transform-origin: 0% 100%;
	}
	/* 
	 * Transform all the slices of hamburger
	 * into a crossmark.
	 */
	#menuToggle input:checked ~ span {
	  opacity: 1;
	  transform: rotate(45deg) translate(-2px, -1px);
	  background: #232323;
	}
	/*
	 * But let's hide the middle one.
	 */
	#menuToggle input:checked ~ span:nth-last-child(3) {
	  opacity: 0;
	  transform: rotate(0deg) scale(0.2, 0.2);
	}
	/*
	 * Ohyeah and the last one should go the other direction
	 */
	#menuToggle input:checked ~ span:nth-last-child(2) {
	  transform: rotate(-45deg) translate(0, -1px);
	}
	/*
	 * Make this absolute positioned
	 * at the top left of the screen
	 */
	#WPNavigationMenu {
	  position: absolute;
	  width: 300px;
	  margin: -100px 0 0 -50px;
	  padding: 50px;
	  padding-top: 125px;
	  background: #ededed;
	  list-style-type: none;
	  -webkit-font-smoothing: antialiased;
	  /* to stop flickering of text in safari */
	  transform-origin: 0% 0%;
	  transform: translate(-100%, 0);
	  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
	}
	#WPNavigationMenu li {
	  padding: 10px 0;
	  font-size: 18px;
	  border-bottom: 1px solid #cdcdcd;
	  position:relative;
	}
	/*
	* And let's slide it in from the left
	* .menu-main-nav-container add this container class if you wordpress menu have container element
	*/
	#menuToggle input:checked ~ ul#WPNavigationMenu{
	  transform: none;
	}
	#WPNavigationMenu .expand {
		display: block !important; 
	}
	#WPNavigationMenu .open-menu-link{
		display: none;
		position: absolute;
		right: 15px;
		top:0;
		line-height: 55px;
		font-size: 30px;
		cursor: pointer;
	}
	#WPNavigationMenu li.sub-menu{
		display: none;
	  background-color: #cdcdcd;
	}
	#WPNavigationMenu .visible {
		display: block !important;
	}
	#WPNavigationMenu li a p{
	  text-align:left !important;
	}
	#WPNavigationMenu ul.sub-menu{
	  display:none;
	}
	#WPNavigationMenu ul.sub-menu li:last-child{
	  border:none;
	}
	/* media query enable menu for mobile only */
	@media all and (max-width: 480px) {
	  #mobileMenu{
		display:block;
	  }
	}

HTML and WordPress navigation

<div id="burgerMenu">
		<div id="menuToggle">
			<input type="checkbox" />
			<span></span>
			<span></span>
			<span></span>
			<?php wp_nav_menu( array( 'theme_location' => 'your-wp-navigation-id', 'menu_id' => 'WPNavigationMenu') ); ?>
		</div>
	</div>

Javascript code is not necessary but it helps you to manage submenu. This code will collapse sub-menus and open sub-menu on click event.

jQuery(document).ready(function($){
	$("#WPNavigationMenu .menu-item-has-children").append("<div class='open-menu-link open'>+</div>");
	$('#WPNavigationMenu .menu-item-has-children').append("<div class='open-menu-link close'>-</div>");

	$('#WPNavigationMenu .open').addClass('visible');

	$('#WPNavigationMenu .open-menu-link').click(function(e){
		var childMenu =  e.currentTarget.parentNode.children[1];
		if($(childMenu).hasClass('visible')){
			$(childMenu).removeClass("visible");

			$(e.currentTarget.parentNode.children[3]).removeClass("visible");
			$(e.currentTarget.parentNode.children[2]).addClass("visible");
		} else {
			$(childMenu).addClass("visible");
			$(e.currentTarget.parentNode.children[2]).removeClass("visible");
			$(e.currentTarget.parentNode.children[3]).addClass("visible");
		}
	});
});