public
Last active

Mobile nav for custom menu in a HTML module in iThemes Builder

  • Download Gist
1. Step 1
1 2 3 4 5 6 7
Using BuilderChild-Air. Can be used in any child theme in conjunction with http://ithemes.com/codex/page/Plugin_related_and_other_generic_customizations_2#How_to_Create_Mobile_Navigation_like_the_new_Air_Theme
 
Code in PHP enabled HTML module (2nd module from top in layout) where "All Pages" is the name of custom menu:
 
<a id="logo" href="<?php bloginfo('url'); ?>"><img src="<?php bloginfo( 'stylesheet_directory' ); ?>/images/100x50.gif" alt="Home" /></a>
 
<?php wp_nav_menu( array( 'menu' => 'All Pages', 'menu_class' => 'builder-module-navigation') ); ?>
2. Screenshot and next step
1 2 3 4 5 6 7 8 9
http://i.imgur.com/Z2VDKWa.png
 
In functions.php added
 
builder_register_module_style( 'html', 'Mobile Navigation', 'mobile-nav' );
 
below
 
builder_register_module_style( 'navigation', 'Mobile Navigation', 'mobile-nav' );
3. it_air_jquery_additions.js
JavaScript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29
jQuery(document).ready(function() {
 
jQuery(".mobile-nav .menu").addClass("hidden"); //2a. add "hidden" class to navigation module nav bar's ul
jQuery(".mobile-nav .builder-module-navigation").addClass("hidden"); //2b. add "hidden" class to html module nav bar's ul
jQuery(".mobile-nav").addClass("mobile"); //1. add "mobile" class to .mobile-nav
 
jQuery(".builder-module-navigation .hidden").before('<div id="it-mobile-menu">☰ Menu</div>'); //3a. inject #it-mobile-menu div above navigation module nav bar's ul
jQuery(".builder-module-html .hidden").before('<div id="it-mobile-menu-html">☰ Menu</div>'); //3b. inject #it-mobile-menu-html div above html module nav bar's ul
 
jQuery("#it-mobile-menu").click(function(){
jQuery(".mobile-nav .menu").slideToggle();
jQuery(".builder-module-navigation.mobile").toggleClass("borderless");
});
jQuery("#it-mobile-menu-html").click(function(){
jQuery(".mobile-nav.builder-module-html ul").slideToggle();
jQuery(".builder-module-html.mobile").toggleClass("borderless");
});
 
jQuery(window).resize(function(){
if(window.innerWidth > 500) {
jQuery(".menu").removeAttr("style");
jQuery(".builder-module-navigation.mobile").removeAttr("style");
 
jQuery(".builder-module-html.mobile ul").removeAttr("style");
jQuery(".builder-module-html.mobile").removeAttr("style");
}
});
 
});
4. style.css
CSS
1 2 3
#it-mobile-menu-html {
display: none;
}
5. style-mobile.css
CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71
/*********************************************
HTML Module (Mobile)
*********************************************/
 
.builder-module-html.mobile {
padding-top: .5em !important;
}
.builder-module-html.mobile ul {
margin-top: .5em;
}
.builder-module-html.mobile li {
width: 100%;
position: relative;
}
/* second level stuff */
.builder-module-html.mobile li ul {
position: relative !important;
left: 0 !important;
border: 0;
width: 100%;
margin: 0;
display: block !important;
}
.builder-module-html.mobile li a,
.builder-module-html.mobile .current_page_item li a,
.builder-module-html.mobile .current-cat li a,
.builder-module-html.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-html.mobile li a:hover,
.builder-module-html.mobile .current_page_item li a:hover,
.builder-module-html.mobile .current-cat li a li a:hover,
.builder-module-html.mobile .current-menu-item li a:hover {
background: #3B3F42;
color: #ECECEC;
}
.builder-module-html.mobile li li {
border: 0;
width: 100%;
}
.builder-module-html.mobile li ul ul {
margin: 0;
}
.builder-module-html.mobile li li a {
padding: .25em 0 .25em 2em;
line-height: inherit;
border-radius: 2px;
}
.builder-module-html.mobile li li li a {
padding-left: 4em;
}
.builder-module-html.mobile-nav ul.hidden {
display: none;
}
#it-mobile-menu-html {
background: #3B3F42;
color: #ECECEC;
padding: .25em .75em;
display: block;
cursor: pointer;
border-radius: 2px;
-webkit-font-smoothing: antialiased;
float: left;
}
.builder-module-html.mobile.borderless {
border: 0;
}
6. Screenshots
1 2 3 4 5 6 7 8 9
http://i.imgur.com/vytge7w.png
 
http://i.imgur.com/f1nqsRE.png
 
Forum topics:
 
http://ithemes.com/forum/topic/44420-mobile-responsive-nav-with-html-module-menu/#entry195338
 
http://ithemes.com/forum/topic/41670-mobile-navigation-like-the-new-air-theme/

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.