8/28/2015 - 11:15 AM

Mobile Menu Toggle State Icon Change - Genesis Framework

Mobile Menu Toggle State Icon Change - Genesis Framework

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

	cursor: pointer
	display: none

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

		content: "\e117"
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>');

		$(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


		// 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.

	//* Submenu Support
	$(".responsive-menu > .menu-item").click(function(event){
		if ( !== this)
			$(this).find(".sub-menu:first").slideToggle(function() {


#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:


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


<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.