Builder Responsive: Mobile Navigation

From iThemes Codex
Revision as of 22:11, 1 August 2013 by Kristen (talk | contribs) (How to Create Mobile Navigation like the new Air Theme)
Jump to: navigation, search

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.

How to Create Mobile Navigation like the new Air Theme

There are several steps involved to accomplish this.


  • 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' );

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 );
add_action( 'wp_enqueue_scripts', 'it_air_load_custom_scripts' );

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' );

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)
*********************************************/ {
	padding-top: .5em !important;
} ul {
	margin-top: .5em;
} li {
	width: 100%;
	position: relative;

/* second level stuff */ li ul {
	position: relative !important;
	left: 0 !important;
	border: 0;
	width: 100%;
	margin: 0;
} li a, .current_page_item li a, .current-cat li a, .current-menu-item li a {
	margin: 0;
	background: transparent;
	border-color: transparent;
	color: #3B3F42;
	border-bottom: 1px solid rgba(0,0,0,0.1);
} li a:hover, .current_page_item li a:hover, .current-cat li a li a:hover, .current-menu-item li a:hover {
	background: #3B3F42;
	color: #ECECEC;
} li li {
	border: 0;
	width: 100%;
} li ul ul {
	margin: 0;
} li li a {
	padding: .25em 0 .25em 2em;
	line-height: inherit;
	border-radius: 2px;
} li li li a {
	padding-left: 4em;
} .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;	
} {
	border: 0;

Make sure the Mobile navigation only shows when in Mobile mode (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

← Back to Builder Codex Home