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
