Builder Responsive: Mobile Navigation
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.