Builder Responsive: Mobile Navigation

From IThemes Codex
(Difference between revisions)
Jump to: navigation, search
(Step 4: Make sure the Mobile navigation only shows when in Mobile mode (style-mobile.css is active))
 
(2 intermediate revisions by one user not shown)
Line 1: Line 1:
 +
==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: http://ithemes.com/forum/forum/236-builder-mobile-navigation-plugin-beta-feedback/
 +
 +
So we encourage you to take the plugin for a test drive first, and provide feedback through that forum.
 +
 +
 +
 +
 +
 
[http://ithemes.com/purchase/air/ 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.
 
[http://ithemes.com/purchase/air/ 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.
  
Line 44: Line 53:
 
<br />
 
<br />
  
=Step 3. Add the css code for the Mobile navigation=
+
=Step 3. Add the CSS for the Mobile navigation=
 
Add the following code at the end of your child themes '''mobile''' stylesheet <code>style-mobile.css</code>:
 
Add the following code at the end of your child themes '''mobile''' stylesheet <code>style-mobile.css</code>:
  
Line 149: Line 158:
 
<br />
 
<br />
  
=Activate the Mobile Navigation=
+
=Step 5: Activate the Mobile Navigation=
 
Select the Mobile navigation Style in the Builder Layout Manager for your Navigation Module.
 
Select the Mobile navigation Style in the Builder Layout Manager for your Navigation Module.
  

Latest revision as of 17:12, February 5, 2014

Contents

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: http://ithemes.com/forum/forum/236-builder-mobile-navigation-plugin-beta-feedback/

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.


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 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;
}


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
Namespaces
Variants
Actions
iThemes Codex
Codex Navigation
Toolbox