Did you already try to make you own WordPress theme using Bootstrap but you cant make Bootstrap navigation bar correctly?
Then, This guide for you. In this guide, we are going to make your own Bootstrap navigation bar for your WordPress theme.
WH Nav Walker Class
When using bootstrap to develop your own WordPress theme, There are many difficulty arise when designing navigation bar. The reason for that is, We cant directly include bootstrap all classes into your WordPress navigation bar.
But, If you need to integrate bootstrap navigation bar to your theme you have to make your own class for that navigation bar also by extending default "Walker_Nav_Menu" class of WordPress.
So, This guide show you same easiest way for way to develop your own bootstrap navigation bar into your WordPress theme.
Here, We made "WH Nav Walker" class for you. This is an open source program and Designed by me (Nirosh Webber). By using this class you can create your own WordPress navigation using bootstrap 4.x any versions.
Lat's see the way of integrate "WH Nav Walker" class into your WordPress theme and make beautiful and fully functional navigation bar with more than 3+ steps DropDown using bootstrap.
First you need to download "WH Nav Walker" class using WebberHub on Github.
Then, You need to add theme support for Manu in functions.php file in your WordPress Theme. The example code as follows.
Now you can copy "WH Nav Walker" class include PHP file into your WordPress theme directory. and Include these PHP file into functions.php file. The example code as follows.
After correctly including above two things in functions.php file. You can set bootstrap navbar into your WordPress theme.
Here, I gm going to set my navigation menu in header.php file. The reson for that is I need to show my navigation bar in every page of my websites.
Following is the code for add bootstrap navigation bar into your WordPress theme.
Now you can see fully functional navigation bar powerd by bootstrap in your wp theme. So, This navigation bar supports upto steps 3+ DropDown menu.
This guide show you the way of making your own navigation bar for your WorPress theme using bootstrap 4.x any versions.
Following video you can see how is the looking after completely developed this navigation bar.
Here, I included same styling and jquery scripts for make it beautiful and functional smoothly. Then the navigation bar can see and work professional manner.
If you need to learn how to add these styling and scrpt we made a guide for that also.