Builder Responsive: Mobile Navigation

(Difference between revisions)
Jump to: navigation, search
(Pre-requisites)
(Step 3. Add the css code for the Mobile navigation)
(28 intermediate revisions by one user not shown)
Line 1: Line 1:
Builder Child - Air features a new Mobile Navigation. The following outlines how to set up a similar responsive mobile navigation.
+
[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.
 +
 
 +
'''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.
  
 
<br />
 
<br />
  
== How to Create Mobile Navigation like the new Air Theme ==
+
==Pre-requisites==
 
+
There are several steps involved to accomplish this. The solution was tested on a couple of Builder Child themes, but not all, so this may not work for all Child themes. As such, these instructions are provided "as is" and are unsupported. Further customisation 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.
 
* Builder parent theme AND your Builder child theme should be at least at version 4, since these are responsive capable themes.
Line 14: Line 12:
 
<br />
 
<br />
  
===Include the javascript code that enables the Mobile dropdown===
+
=Step 1: Include the javascript code that enables the Mobile dropdown=
  
 
* Copy the <code>js</code> folder and contents from the Air child theme to your child theme.
 
* Copy the <code>js</code> folder and contents from the Air child theme to your child theme.
 
* Add the following code at the end of your child theme's <code>functions.php</code> file, yet before the closing <code>?></code> (if any):
 
* Add the following code at the end of your child theme's <code>functions.php</code> file, yet before the closing <code>?></code> (if any):
 +
 +
<br />
  
 
<pre class="brush:php; gutter: false;">
 
<pre class="brush:php; gutter: false;">
Line 28: Line 28:
 
</pre>
 
</pre>
  
===Enable the Mobile Nav as an Alternative Navigation Module Style===
+
<br />
 +
 
 +
=Step 2. Enable the Mobile Nav as an Alternative Navigation Module Style=
 
Following the code added in step 1, add the following code in <code>functions.php</code> (again, before a closing ?>)
 
Following the code added in step 1, add the following code in <code>functions.php</code> (again, before a closing ?>)
 
<pre class="brush:php; gutter: false;">
 
<pre class="brush:php; gutter: false;">
Line 40: Line 42:
 
</pre>
 
</pre>
  
 +
<br />
  
===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 126: Line 129:
 
</pre>
 
</pre>
  
===Make sure the Mobile navigation only shows when in Mobile mode (style-mobile.css is active)===
+
<br />
 +
 
 +
=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 <code>style-mobile.css</code> is active.
  
 
Add the following at the end of child theme's <code>style.css</code> (WP dashboard -> Appearance -> Editor):
 
Add the following at the end of child theme's <code>style.css</code> (WP dashboard -> Appearance -> Editor):
Line 140: Line 147:
 
</pre>
 
</pre>
  
===Activate the Mobile Navigation===
+
<br />
 +
 
 +
=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.
 +
 +
<br />
 +
 +
==See also==
 +
=== Responsive Support ===
 +
* [[Builder_Responsive:_Introduction|Introduction]]
 +
* [[Builder_Responsive:_Videos|Videos]]
 +
* [[Builder_Responsive:_Stylesheets| Stylesheets]]
 +
* [[Builder_Responsive:_Responsive_Support_Function_Parameters| Responsive Support Function Paramaters]]
 +
* [[Builder_Responsive:_Responsive_vs._Adaptive|Responsive vs. Adaptive]]
 +
*[[Builder_Responsive:_Mobile_Navigation|Mobile Navigation]]
 +
* [[Builder_Responsive:_FAQ| FAQ]]
 +
 +
<br />
 +
[[:Builder|← Back to Builder Codex Home]]

Revision as of 16:17, August 1, 2013

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.


Contents

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