How to add a working second Mobile Navigation menu in iThemes Builder

Newer iThemes Builder child themes like Air come built-in with mobile navigation feature. When a layout is edited and Navigation Module modified there will be a Style called Mobile Navigation. With this Style applied to the module, in the front-end at mobile widths i.e, < 500px, menu items will no longer appear and will be replaced by the standard burger ☰ menu which when tapped will open and close the mobile menu.

This works great when you apply the Style to a single Navigation Module. If there is another Navigation Module with Mobile Navigation Style in the layout the mobile menu does appear but tapping on it does not expand the menu.

Here’s how to make it work.

But first screenshots to showing the second Navigation Module in action:

1) Edit child theme’s functions.php.

Below

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

add

builder_register_module_style( 'navigation', 'Mobile Navigation 2', 'mobile-nav2' );

2) Edit js/it_air_jquery_additions.js.

Replace

[javascript]
jQuery(document).ready(function() {

jQuery(".mobile-nav .menu").addClass("hidden");
jQuery(".mobile-nav").addClass("mobile");

jQuery(".hidden").before(‘<div id="it-mobile-menu">☰ Menu</div>’);

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

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

});
[/javascript]

with

[javascript]
jQuery(document).ready(function() {

jQuery(".mobile-nav .menu").addClass("hidden");
jQuery(".mobile-nav2 .menu").addClass("hidden2");
jQuery(".mobile-nav").addClass("mobile");
jQuery(".mobile-nav2").addClass("mobile");

jQuery(".hidden").before(‘<div id="it-mobile-menu">☰ Menu</div>’);
jQuery(".hidden2").before(‘<div id="it-mobile-menu2">☰ Main Menu</div>’);

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

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

});
[/javascript]

3) In child theme’s style.css below

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

add

#it-mobile-menu2 {
	display: none;
	margin-bottom: 0.5em;
}

4) Edit child theme’s style-mobile.css.

Change

.builder-module-navigation.mobile-nav .menu.hidden {
	display: none;
}

to

.builder-module-navigation.mobile-nav .menu.hidden,
.builder-module-navigation.mobile-nav2 .menu.hidden2 {
	display: none;
}

and

#it-mobile-menu {
	background: #3B3F42;
	color: #ECECEC;
	padding: .25em .75em;	
	display: block;
	cursor: pointer;
	border-radius: 2px;
	-webkit-font-smoothing: antialiased;	
}

to

#it-mobile-menu, #it-mobile-menu2 {
	background: #3B3F42;
	color: #ECECEC;
	padding: .25em .75em;	
	display: block;
	cursor: pointer;
	border-radius: 2px;
	-webkit-font-smoothing: antialiased;	
}

[Optional]

Change

.builder-module-navigation.mobile li a,
.builder-module-navigation.mobile .current_page_item li a,
.builder-module-navigation.mobile .current-cat li a,
.builder-module-navigation.mobile .current-menu-item li a {
	/* Cody's Mods */
	margin: 0;
	background: transparent;
	border-color: transparent;
	color: #3B3F42;
	border-bottom: 1px solid rgba(0,0,0,0.1);
}

to

.builder-module-navigation.mobile li a,
.builder-module-navigation.mobile .current_page_item li a,
.builder-module-navigation.mobile .current-cat li a,
.builder-module-navigation.mobile .current-menu-item li a {
	/* Cody's Mods */
	margin: 0;
	background: transparent;
	border-color: transparent;
/* 	color: #3B3F42; */
	border-bottom: 1px solid rgba(0,0,0,0.1);
}

5) Modify settings of Navigation Module and apply Module Navigation 2 Style to it.

That’s it.