Why use a Bootstrap 4 navigation menu? We all have our reasons most of which is probably because your navigation menu needs to be mobile responsive. Also, Bootstrap has awesome features and is a widely accepted solution used on countless websites as a valuable and useful front-end toolkit.
There are other front-end toolkits out there but Bootstrap is among the most popular. If you don’t know what Bootstrap is it may be worth your time find 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 not careful, when the parent theme is updated you can lose all of your theme changes. By default, this source code points to the Twenty Nineteen theme as its parent theme. Therefore, the source code to follow is a child theme of Twenty Nineteen.
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 an existing menu created in the WordPress Dashboard. With that named location, update the variable
$name_of_menu_to_replace to its value. That’s it! No other changes are needed.
Things To Know
There was a time when 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 Bootstrap authors feel this way. But for now that is just the way it is. Thanks to user skelly on Codeply, I was able to find a good workaround. What I like about this solution is that is minimal and relies only on CSS.
Another thing to know is that Bootstrap is not AMP compliant. Why not? Because AMP has requirements in place so that page load size is minimal and can be successfully used. Additionally, CSS usage between the two projects are not compatible with each other. Both of these factors may produce unexpected results in your websites’s design.