Website Guider

The Ultimate Resource for WPadmins and Geeks

How To Add a Responsive Menu in Genesis Theme

Today I am going to show you how you can add a responsive menu to any Genesis child theme.

The responsive mobile menu we are going to create is similar to the magazine pro themes mobile menu.

Also, you should remember that this code applies to any menu active on your site.

Let’s start our work on making a responsive mobile menu for genesis.

First of all, you need to create a js file in your 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.

Raashid Din Dar

Raashid Din Dar is a web developer and designer. He specialises in WordPress Theme and Plugin development. Also, Web Designing is what he loves.He loves to read books and play with friends.

3 thoughts on “How To Add a Responsive Menu in Genesis Theme

Leave a Reply

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

Back to top