Builder Responsive: Mobile Navigation

From IThemes Codex
Revision as of 18:12, February 5, 2014 by Ronald (Talk | contribs)
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
Jump to: navigation, search


Important notice - new plugin

On Feb 4, 2014, a mobile navigation plugin was released for Beta testing. It should make all the manual changes unnecessary. You can find more on this in this forum:

So we encourage you to take the plugin for a test drive first, and provide feedback through that forum.

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.


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

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;

Step 5: 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

Personal tools
iThemes Codex
Codex Navigation