Builder Responsive: Mobile Navigation

Builder Child - Air features a new responsive Mobile Navigation. The following outlines how to set up a similar responsive mobile navigation in other responsive Builder child themes.

Note: This solution was tested on several (but not all) responsive-ready child themes. As such, these instructions are provided "as is" and are unsupported. Further customization is beyond the scope of our theme support.

Pre-requisites

• Builder parent theme AND your Builder child theme should be at least at version 4, since these are responsive capable themes.
• Responsive needs to be enabled in the child theme (functions.php should contain: add_theme_support( 'builder-responsive' );

Step 1: Include the javascript code that enables the Mobile dropdown

• Copy the js folder and contents from the Air child theme to your child theme.
• Add the following code at the end of your child theme's functions.php file, yet before the closing ?> (if any):

// Enqueuing and Using Custom Javascript/Jquery 
function it_air_load_custom_scripts() {
	wp_register_script( 'it_air_jquery_additions', get_stylesheet_directory_uri() . '/js/it_air_jquery_additions.js', array('jquery'), false, true );
	wp_enqueue_script('it_air_jquery_additions');
}
add_action( 'wp_enqueue_scripts', 'it_air_load_custom_scripts' );

Step 2. Enable the Mobile Nav as an Alternative Navigation Module Style

Following the code added in step 1, add the following code in functions.php (again, before a closing ?>)

// Add Support for Alternate Module Styles
if ( ! function_exists( 'it_builder_loaded' ) ) {
	function it_builder_loaded() {
		builder_register_module_style( 'navigation', 'Mobile Navigation', 'mobile-nav' );
	}
}
add_action( 'it_libraries_loaded', 'it_builder_loaded' );

Step 3. Add the css code for the Mobile navigation

Add the following code at the end of your child themes mobile stylesheet style-mobile.css:

/*********************************************
	Navigation Module (Mobile)
*********************************************/
.builder-module-navigation.mobile {
	padding-top: .5em !important;
}

.builder-module-navigation.mobile ul {
	margin-top: .5em;
}

.builder-module-navigation.mobile li {
	width: 100%;
	position: relative;
}

/* second level stuff */
.builder-module-navigation.mobile li ul {
	position: relative !important;
	left: 0 !important;
	border: 0;
	width: 100%;
	margin: 0;
}

.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 {
	margin: 0;
	background: transparent;
	border-color: transparent;
	color: #3B3F42;
	border-bottom: 1px solid rgba(0,0,0,0.1);
}

.builder-module-navigation.mobile li a:hover,
.builder-module-navigation.mobile .current_page_item li a:hover,
.builder-module-navigation.mobile .current-cat li a li a:hover,
.builder-module-navigation.mobile .current-menu-item li a:hover {
	background: #3B3F42;
	color: #ECECEC;
}

.builder-module-navigation.mobile li li {
	border: 0;
	width: 100%;
}

.builder-module-navigation.mobile li ul ul {
	margin: 0;
}

.builder-module-navigation.mobile li li a {
	padding: .25em 0 .25em 2em;
	line-height: inherit;
	border-radius: 2px;
}

.builder-module-navigation.mobile li li li a {
	padding-left: 4em;
}

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

.builder-module-navigation.mobile.borderless {
	border: 0;
}

Step 4: Make sure the Mobile navigation only shows when in Mobile mode

Make sure the Mobile navigation only shows when in Mobile mode or when the style-mobile.css is active.

Add the following at the end of child theme's style.css (WP dashboard -> Appearance -> Editor):

/*********************************************
	Mobile Navigation Menu (Alternate Module Style - hidden above 500px wide)
*********************************************/

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

Activate the Mobile Navigation

Select the Mobile navigation Style in the Builder Layout Manager for your Navigation Module.

See also

Responsive Support

• Introduction
• Videos
• Stylesheets
• Responsive Support Function Paramaters
• Responsive vs. Adaptive
• Mobile Navigation
• FAQ

← Back to Builder Codex Home