functions.php

optimize seo, security and theme development
with these functions.php code snippets

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”

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.