Builder Responsive: Mobile Navigation
(13 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 5: | Line 14: | ||
<br /> | <br /> | ||
− | + | ==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 12: | Line 21: | ||
<br /> | <br /> | ||
− | = | + | =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. | ||
Line 30: | Line 39: | ||
<br /> | <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 42: | Line 51: | ||
</pre> | </pre> | ||
+ | <br /> | ||
− | = | + | =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 130: | Line 140: | ||
<br /> | <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 146: | Line 158: | ||
<br /> | <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. | ||
Latest revision as of 18:12, February 5, 2014
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' );
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 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; }
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; }
Select the Mobile navigation Style in the Builder Layout Manager for your Navigation Module.