Adding Bootstrap 3 navbar to Genesis and WordPress

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' => '    
      
    
 %3$s'
));
}

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

Reader Interactions

Trackbacks

Footer