Mobile Menu Toggle State Icon Change - Genesis Framework

ReadMe.md

#Modify the responsive-menu.js in the Genesis Framework to adjust mobile menu icon when the menu is open or closed

---

This snipit is for modifying the default responsive menu jquery that is included with most of the Geneis Frameworks child themes. The modification adds a class to so that the mobile menu icon can be changed when the mobile menu is expanded, replacing the normal hamburger icon with an X icon (or whatever icon you choose). The code is also modified to remove that class when the browser is less than a certin size so that the hamburger icon is shown and the closed state icon doesn't remain when the window is resized on a desktop.

I am using the icomoon icon font in my styling.

Normaly the jQuery adds the class "menu-icon" to submenu items so their icon has a toggle state. I have used this class and added it to the "responsive-menu-icon" class when the .toggleClass attribute is triggered. This results in a sturcture that looks like this:

Before:

<div class="responsive-menu-icon"></div>

After:

<div class="responsive-menu-icon menu-open"></div>

I can then style a :after pseudo elements in csss to overide the hamburger icon with a new icon. When the menu is open but the window shrinks bellow a set size (see line #14) the "menu-open" class is removed and the hamburger icon returns. The same happens then the the .toggleClass attribute is triggered to collapse the menu.

responsive-menu.js

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();
		// Add "menu-open" class to icon when menu is toggled to change style
		$(".responsive-menu-icon").toggleClass('menu-open');

	});

	$(window).resize(function(){
		// Largest breaking point
		if(window.innerWidth > 1139) {
			$("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");
			// Remove "menu-open" class when the the screen is greater-than to avoid the issue of the close icon staying on when the screen is resized when the mobile menu is open.
			$(".responsive-menu-icon").removeClass('menu-open');
		}
	});

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

});

style.sass

//* This is a basic styaling to meet my needs, moduify as needed.
// ##Responsive Menu
/*--------------------------------------------- */

.responsive-menu-icon
	cursor: pointer
	display: none

	&:before
		content: "\e120"
		color: $primary-link-color
		display: block
		font-family: $icon-font
		font-size: 1.125em
		margin: 0 auto
		text-align: center

.menu-open
	&:before
		content: "\e117"