How To Add a Responsive Menu in Genesis Theme

Today, I’ll be showing you how to add a responsive menu to any of your Genesis child themes. The responsive mobile menu that we are supposed to create is very much similar to the magazine pro themes mobile menus. You should also remember that our code is applicable to any menu already active on your website.

Now, without consuming more of your time, let’s begin our work on making a responsive mobile menu for your genesis child theme. First of all, what you need to do is to create a js file in your Genesis child theme. The best way is to create a folder called ‘JS‘ and inside it, you can create a new file.

Name the file responsive-menu.js and paste the code given below in it.

jQuery(function( $ ){

	$("header .genesis-nav-menu, .nav-primary .genesis-nav-menu, .nav-secondary .genesis-nav-menu").addClass("responsive-menu").before('<div class="responsive-menu-icon"></div>');

	$(".responsive-menu-icon").click(function(){
		$(this).next("header .genesis-nav-menu, .nav-primary .genesis-nav-menu, .nav-secondary .genesis-nav-menu").slideToggle();
	});

	$(window).resize(function(){
		if(window.innerWidth > 768) {
			$("header .genesis-nav-menu, .nav-primary .genesis-nav-menu, .nav-secondary .genesis-nav-menu, nav .sub-menu").removeAttr("style");
			$(".responsive-menu > .menu-item").removeClass("menu-open");
		}
	});

	$(".responsive-menu > .menu-item").click(function(event){
		if (event.target !== this)
		return;
			$(this).find(".sub-menu:first").slideToggle(function() {
			$(this).parent().toggleClass("menu-open");
		});
	});

});

Save the file and then navigate to your themes CSS file and add this code at the end.

/* Responsive Mobile Menu Starts
--------------------------------------------- */

.responsive-menu-icon {
 cursor: pointer;
 display: none;
 margin-bottom: -1px;
 text-align: center;
}

.responsive-menu-icon::before {
 content: "\f333";
 display: inline-block;
 font: normal 20px/1 'dashicons';
 margin: 0 auto;
 padding: 10px;
 font-size: 40px;
}

.site-header .responsive-menu-icon::before {
 padding: 0;
}

@media only screen and (max-width: 768px) {

.footer-widgets,
 .nav-secondary,
 .site-footer,
 .site-header,
 .site-inner {
 padding-left: 5%;
 padding-right: 5%;
 }

.genesis-nav-menu > .first > a {
 padding-left: 20px;
 }

.genesis-nav-menu.responsive-menu > .menu-item > .sub-menu,
 .genesis-nav-menu.responsive-menu {
 display: none;
 }

.genesis-nav-menu.responsive-menu .menu-item,
 .responsive-menu-icon {
 display: block;
 }
 
 .genesis-nav-menu.responsive-menu .menu-item {
 margin: 0;
 }

.genesis-nav-menu.responsive-menu .menu-item:hover {
 position: static;
 }
 
 .genesis-nav-menu a {
 line-height: 1;
 padding: 18px 20px;
 }

.genesis-nav-menu.responsive-menu .menu-item-has-children {
 cursor: pointer; 
 }

.genesis-nav-menu.responsive-menu .menu-item-has-children > a {
 margin-right: 60px;
 }

.genesis-nav-menu.responsive-menu > .menu-item-has-children:before {
 content: "\f347";
 float: right;
 font: normal 16px/1 'dashicons';
 height: 16px;
 padding: 16px 20px;
 right: 0;
 text-align: right;
 z-index: 9999;
 }

.genesis-nav-menu.responsive-menu .menu-open.menu-item-has-children:before {
 content: "\f343";
 }
 
 .nav-primary .genesis-nav-menu.responsive-menu > .menu-item-has-children:before {
 color: #fff;
 }

.genesis-nav-menu.responsive-menu .sub-menu {
 background-color: rgba(0, 0, 0, 0.05);
 border: none;
 left: auto;
 opacity: 1;
 position: relative;
 -moz-transition: opacity .4s ease-in-out;
 -ms-transition: opacity .4s ease-in-out;
 -o-transition: opacity .4s ease-in-out;
 -webkit-transition: opacity .4s ease-in-out;
 transition: opacity .4s ease-in-out;
 width: 100%;
 z-index: 99;
 }

.genesis-nav-menu.responsive-menu .sub-menu .sub-menu {
 background-color: transparent;
 margin: 0;
 padding-left: 25px;
 }

.genesis-nav-menu.responsive-menu .sub-menu li a,
 .genesis-nav-menu.responsive-menu .sub-menu li a:hover {
 background: none;
 border: none;
 padding: 14px 20px;
 position: relative;
 width: 100%;
 }
}
/* Responsive Mobile Menu ends
--------------------------------------------- */

Now you have a working responsive mobile menu. But wait, there is another code you need to copy from here.

Paste the below code in your functions.php file to make the mobile menu fully active.

//* Enqueue Responsive Menu script
add_action( 'wp_enqueue_scripts', 'wg_enqueue_scripts' );
function wg_enqueue_scripts() {
	
	wp_enqueue_script( 'wg-responsive-menu', get_bloginfo( 'stylesheet_directory' ) . '/js/responsive-menu.js', array( 'jquery' ), '1.0.0' );

}

Now, refresh the stylesheet of your current theme and see how it works.

Please, let me know if you have any questions.