How To Enable WordPress / Bootstrap Navigation Compatibility
We all know about the power of Bootstrap framework in responsive websites. It gives awesome flexibility and standard features to extend the websites and develop them fast saving us time. Now when we talk about combining the strength of Bootstrap with WordPress then we see it quite feasible and easy to implement.
One of the best features we can use is the Bootstrap standard navigation along with WordPress menu to create ultra responsive and cross-platform compatible main navigation menu. Let’s see in the steps given below how we can make Bootstrap Navigation compatible with the WordPress Menu.
How do I enable Bootstrap Navigation in WordPress?
You can follow these simple steps to make WordPress menu work as Bootstrap navigation.
Step-1: Download wp-bootstrap-navwalker and upload wp_bootstrap_navwalker.php to your WordPress theme folder at this location “/wp-content/themes/yourtheme/”.
This is a custom WordPress nav walker class to fully implement the Bootstrap 3.0+ navigation style in a custom theme using the WordPress built in menu manager.
Step-2: Go to your theme’s functions.php file at this location “/wp-content/themes/yourtheme/functions.php” and add this code there. It tells WordPress to read this file for further use.
Step-3: Add this code to your themes header.php file at this location: “/wp-content/themes/yourtheme/header.php”
'menu' => 'primary',
'theme_location' => 'primary',
'depth' => 2,
'container' => 'div',
'container_class' => 'collapse navbar-collapse',
'container_id' => 'bs-example-navbar-collapse-1',
'menu_class' => 'nav navbar-nav',
'fallback_cb' => 'wp_bootstrap_navwalker::fallback',
'walker' => new wp_bootstrap_navwalker())
What this code does actually is integrating the Bootstrap Navbar component with the theme. So now you can sit relax, you have Bootstrap navigation in action.