It is a pity that latest editions of bootstrap did not include a “dropdown-submenu” anymore, (bootstrap 3 +). Unfortunately they thought it was not necessary anymore. However, the good news is, you can actually achieve almost the same with a little help from CSS.
PART 1 – MODIFY YOUR CSS
Add the following CSS code to your existing stylesheet, or create a new one if you want to keep your custom code separated from the main one.
PART 2 – TEST YOUR HTML CODE
Here is an example of the HTML code you will need to add to your bootstrap page in order to see the menu in action:
One consideration to take when hacking your bootstrap in this way is that, while the result are egregious on desktop view, the UI experience on mobile can be a bit frustrating on mobile as sometimes is difficult to “catch” the right link due to touch screen restrictions, different mobiles features, screen size, browser and OS.
Other than that, this remains a great fix for your web site if your audience is more orientated to the big screen view.
For more of this tutorials you can follow me on social media by clicking on the media icons down below.
Bye for now
About the Author
Digital Designer, blog writer and also a tech enthusiast.
He loves to write content for blogs, podcasts, design websites, logos, brochures, banners and anything that sends a message to an audience.
You can contact Daniele at the link below:
Comments are closed.