UPDATED 2015/05/06 – See How To Integrate Bootstrap Navbar inot WordPress Genesis Framework
I like bootstrap. I think a framework like Genesis with the bootstrap code would be awesome. I decided to put together a Genesis child template that would use the navbar of Bootstrap 3. I’m not sure if this is the best way of doing it, but it works (I’m writing this on a WordPress/Genesis website) with this code to use the responsive navbar menu. First we need to remove the default nav generation by doing the following:
remove_action( 'genesis_after_header', 'genesis_do_nav' );
Next we need to create our own ‘genesis_do_nav’ function and hook it. In this case, I wanted the nav to appear first so I hooked it with higher priority in the genesis_header. It also had to come before title-area to keep the navbar behind the logo for small screens:
add_action('genesis_header', 'custom_do_nav', 5); function custom_do_nav() { wp_nav_menu(array( 'menu' => 'Primary Navigation', 'container' => 'nav', 'container_class' => 'navbar navbar-default navbar-static-top', 'menu_class' => 'nav navbar-nav navbar-right', 'menu_id' => 'navigation', 'items_wrap' => ' <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#mry-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <div class="collapse navbar-collapse" id="mry-navbar-collapse-1"><ul id="%1$s" class="%2$s">%3$s</ul></div></div>' )); }
custom_do_nav creates a markup very similar to the markup of Bootstrap’s navbar. But it does not create the markup for sub-menus or dropdowns. That might be something to look at later, but at first glance it looked like I might need to create a menu Walker.
Next I copy and pasted the needed CSS markup from the Bootstrap.css file. I copied all the elements and classes referenced in the code above. Did not include any html reset css as Genesis already has that included. I had to add some css specifically for the genesis layout and css to keep the logo (title-area) from being covered by the navbar on smaller screens. This does not include the bootstrap css.
.site-header, .site-header > .wrap { width: 100%; padding: 0; margin: 0; height: auto; /*This has to be auto for the navbar to be able to push content down */ position: relative; } /* using p:absolute on title-area to keep the navbar from going on top of logo in small screens Changed nav to come before title-area so that nav will be behind logo without changing navbar to p:absolute*/ .site-header .title-area { width:180px; padding: 0; margin: 0; float: left; height: 90px; position: absolute; z-index: 1000; } .site-header .site-title a { width: 180px; } .site-header nav { width: 100%; padding: 0; margin: 0; float: right; height: 100%; } .navbar-nav > li > a { padding-top: 35px; padding-top: 3.5rem; padding-bottom: 35px; padding-bottom: 3.5rem; } @media (max-width: 767px) { .navbar-nav > li > a { padding-top: 15px; padding-top: 1.5rem; padding-bottom: 15px; padding-bottom: 1.5rem; } } .navbar-default, .site-header { background: #f5f5f5; border: 1px solid transparent; border-color: #e7e7e7; border-width: 0px 0px 1px; } .site-header .title-area a{ background: url(images/logo1.png) no-repeat left; } .navbar-toggle { margin-right: 25px; padding: 20px 10px; margin-top: 15px; margin-bottom: 8px; }
Lastly, we need a little javaScript to add a click event to the navbar-toggle div that will toggle sliding down or up the menu when it is clicked. I didn’t feel like searching through bootstrap’s js for this code, so I wrote it.
/* Uses bootstrap 3 markup for navbar makes the button slide up the menu */ (function($) { $(document).ready( function() { $('.navbar-header').on('click','button',function(e) { e.preventDefault(); var menuName = $(this).data('target'); $(menuName).slideToggle(); }); /* Make just the menu button viewable initially */ var menuName = $('.navbar-header button').data('target'); $(menuName).slideUp(); }); })(jQuery);
I also liked the following article on how to build a collapsible menu using Genesis. I might us this in future projects.
http://www.rvamedia.com/wordpress/collapsible-responsive-menu-for-genesis
UPDATE: I went ahead and figured out how to also add the dropdowns. See this article: Bootstrap Navbar with Dropdowns for Genesis and WordPress
[…] writing my first post (click here to see that article) on adding the bootstrap navbar to Genesis and WordPress where I didn’t add dropdown […]