Code for bootstrap 3 responsive navbars in wordpress using wp-bootstrap-navwalker class
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<?php | |
/** | |
* The register_nav_menus call should go inside your themes setup function | |
* (usually found inside functions.php). | |
*/ | |
register_nav_menus( | |
array( | |
'footer_nav' => __( 'Footer Menu', 'mytheme' ), // example of adding a menu location | |
'top_menu' => __( 'Top Menu', 'mytheme' ), // we will be using this top_menu location | |
) | |
); | |
/** | |
* The require_once should go inside your functions.php file and needs to point | |
* to the directory where the wp-bootstrap-navwalker.php file has been placed | |
* insisde your theme. | |
*/ | |
// Register Custom Nav Walker Class | |
require_once 'wp-bootstrap-navwalker.php'; | |
// The code below goes into your header.php file. It is a mix of html and php. ?> | |
<nav class="navbar navbar-default" role="navigation"> | |
<!-- Brand and toggle get grouped for better mobile display --> | |
<div class="navbar-header"> | |
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-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 esc_html_e( get_bloginfo('name') ); ?></a> | |
</div> | |
<!-- Collect the nav links, forms, and other content for toggling --> | |
<div class="collapse navbar-collapse navbar-ex1-collapse"> | |
<?php | |
wp_nav_menu( array( | |
'menu' => 'top_menu', | |
'depth' => 2, | |
'container' => false, | |
'menu_class' => 'nav navbar-nav', | |
// if no menu is assigned to this slot use the fallback defined by the walker. | |
'fallback_cb' => 'WP_Bootstrap_Navwalker::fallback', | |
// Process nav menu using our custom nav walker. | |
'walker' => new WP_Bootstrap_Navwalker(), | |
) ); | |
?> | |
</div><!-- /.navbar-collapse --> | |
</nav> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment