Mobile nav for custom menu in a HTML module in iThemes Builder

1. Step 1

Using BuilderChild-Air. Can be used in any child theme in conjunction with http://ithemes.com/codex/page/Plugin_related_and_other_generic_customizations_2#How_to_Create_Mobile_Navigation_like_the_new_Air_Theme

Code in PHP enabled HTML module (2nd module from top in layout) where "All Pages" is the name of custom menu:

<a id="logo" href="<?php bloginfo('url'); ?>"><img src="<?php bloginfo( 'stylesheet_directory' ); ?>/images/100x50.gif" alt="Home" /></a>

<?php wp_nav_menu( array( 'menu' => 'All Pages', 'menu_class' => 'builder-module-navigation') ); ?>

2. Screenshot and next step

http://i.imgur.com/Z2VDKWa.png

In functions.php added

builder_register_module_style( 'html', 'Mobile Navigation', 'mobile-nav' );

below

builder_register_module_style( 'navigation', 'Mobile Navigation', 'mobile-nav' );

3. it_air_jquery_additions.js

jQuery(document).ready(function() {

  jQuery(".mobile-nav .menu").addClass("hidden"); //2a. add "hidden" class to navigation module nav bar's ul
	jQuery(".mobile-nav .builder-module-navigation").addClass("hidden"); //2b. add "hidden" class to html module nav bar's ul
	jQuery(".mobile-nav").addClass("mobile"); //1. add "mobile" class to .mobile-nav

	jQuery(".builder-module-navigation .hidden").before('<div id="it-mobile-menu">☰ Menu</div>'); //3a. inject #it-mobile-menu div above navigation module nav bar's ul
	jQuery(".builder-module-html .hidden").before('<div id="it-mobile-menu-html">☰ Menu</div>'); //3b. inject #it-mobile-menu-html div above html module nav bar's ul

	jQuery("#it-mobile-menu").click(function(){
		jQuery(".mobile-nav .menu").slideToggle();
		jQuery(".builder-module-navigation.mobile").toggleClass("borderless");
	});
	jQuery("#it-mobile-menu-html").click(function(){
		jQuery(".mobile-nav.builder-module-html ul").slideToggle();
		jQuery(".builder-module-html.mobile").toggleClass("borderless");
	});

	jQuery(window).resize(function(){
		if(window.innerWidth > 500) {
			jQuery(".menu").removeAttr("style");
			jQuery(".builder-module-navigation.mobile").removeAttr("style");

			jQuery(".builder-module-html.mobile ul").removeAttr("style");
			jQuery(".builder-module-html.mobile").removeAttr("style");
		}
	});

});

4. style.css

#it-mobile-menu-html {
  display: none;
}

5. style-mobile.css

/*********************************************
  HTML Module (Mobile)
*********************************************/

.builder-module-html.mobile {
	padding-top: .5em !important;
}
.builder-module-html.mobile ul {
	margin-top: .5em;
}
.builder-module-html.mobile li {
	width: 100%;
	position: relative;
}
/* second level stuff */
.builder-module-html.mobile li ul {
	position: relative !important;
	left: 0 !important;
	border: 0;
	width: 100%;
	margin: 0;
	display: block !important;
}
.builder-module-html.mobile li a,
.builder-module-html.mobile .current_page_item li a,
.builder-module-html.mobile .current-cat li a,
.builder-module-html.mobile .current-menu-item li a {
	margin: 0;
	background: transparent;
	border-color: transparent;
	color: #3B3F42;
	border-bottom: 1px solid rgba(0,0,0,0.1);
}
.builder-module-html.mobile li a:hover,
.builder-module-html.mobile .current_page_item li a:hover,
.builder-module-html.mobile .current-cat li a li a:hover,
.builder-module-html.mobile .current-menu-item li a:hover {
	background: #3B3F42;
	color: #ECECEC;
}
.builder-module-html.mobile li li {
	border: 0;
	width: 100%;
}
.builder-module-html.mobile li ul ul {
	margin: 0;
}
.builder-module-html.mobile li li a {
	padding: .25em 0 .25em 2em;
	line-height: inherit;
	border-radius: 2px;
}
.builder-module-html.mobile li li li a {
	padding-left: 4em;
}
.builder-module-html.mobile-nav ul.hidden {
	display: none;
}
#it-mobile-menu-html {
	background: #3B3F42;
	color: #ECECEC;
	padding: .25em .75em;
	display: block;
	cursor: pointer;
	border-radius: 2px;
	-webkit-font-smoothing: antialiased;
	float: left;
}
.builder-module-html.mobile.borderless {
	border: 0;
}

6. Screenshots

http://i.imgur.com/vytge7w.png

http://i.imgur.com/f1nqsRE.png

Forum topics:

http://ithemes.com/forum/topic/44420-mobile-responsive-nav-with-html-module-menu/#entry195338

http://ithemes.com/forum/topic/41670-mobile-navigation-like-the-new-air-theme/