Skip to content

Instantly share code, notes, and snippets.

@jfitzsimmons2
Last active November 10, 2017 15:01
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 3 You must be signed in to fork a gist
  • Save jfitzsimmons2/7734965 to your computer and use it in GitHub Desktop.
Save jfitzsimmons2/7734965 to your computer and use it in GitHub Desktop.
How to structure your WP <nav> tag using wp_nav_menu to use Bootstrap 3's navbar. Note this is specifically for the "fixed top" version of the navbar (http://getbootstrap.com/components/#navbar-fixed-top). Also only works for single-level navs. If there are sub-menus, additional tweaking is needed.
<nav id="site-navigation" class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#main-navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"><?php bloginfo( 'name' ); ?></a>
</div>
<!--<a class="skip-link screen-reader-text" href="#content"><?php _e( 'Skip to content', '_s' ); ?></a>-->
<?php wp_nav_menu( array(
'theme_location' => 'primary',
'container' => 'div',
'container_class' => 'collapse navbar-collapse',
'container_id' => 'main-navbar-collapse',
'menu_class' => 'nav navbar-nav',
'menu_id' => '',
'echo' => true,
'fallback_cb' => 'wp_page_menu',
'before' => '',
'after' => '',
'link_before' => '',
'link_after' => '',
'items_wrap' => '<ul id="%1$s" class="%2$s">%3$s</ul>',
'depth' => 0,
'walker' => ''
)); ?>
</div>
</nav><!-- #site-navigation -->
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment