Why convert a WordPress Menu to a Bootstrap 4 Menu? Maybe because you are designing your own theme and want a mobile responsive menu without building one from scratch. Also, because Bootstrap is a widely accepted solution and is used on countless websites as a valuable and useful front-end toolkit.
There are other front-end toolkits out there but Bootstrap is one of the most popular. If you don’t know what Bootstrap is it may be worth your time to go and check it out.
Build responsive, mobile-first projects on the web with the world’s most popular front-end component library.
https://getbootstrap.com/
“Bootstrap is is the most popular CSS Framework for developing responsive and mobile-first websites.”
https://www.w3schools.com/whatis/whatis_bootstrap.asp
Adding This Code To An Existing Theme
Before moving ahead, make sure you understand what is a parent theme and a what is a child theme. If you are not careful, when the parent theme is updated you may lose all of your theme changes. By default, this source code points to the Twenty Nineteen theme as its parent theme.
The source code can be downloaded from my GitHub account. In order to use this code you will need to know the named location of the menu you would like to convert to a Bootstrap 4 menu. Once you know the named location, update the variable $name_of_menu_to_replace
to its value.
Things To Know
By default Bootstrap 4 does not support multi-level menus. This means having submenus is not supported. There was a time Bootstrap supported submenus but ever since v3.0 the feature has been removed. According to one of its authors, “Submenus just don’t have much of a place on the web right now.” It’s a shame the authors feel this way. But for now that is just the way it is.
Another thing to know is that a quick Google search will reveal several possible solutions from many great people. Each solution is valuable in its own merit. One goal I had was to find a solution that was simple and did not use JavaScript. For that reason I chose a solution which can be found on Codeply to model after. It was simple and it it just worked.