bootstrap 4 nav doesn’t display hamburger on resize

by

Updated 2022

The Bootstrap 5 Navbar also requires navbar-light or navbar-dark to make the hamburger show when the Navbar is toggled to mobile mode.

Updated 2018

The hamburger is there, but it’s not visible because the Navbar needs a color, or change the toggler color.

<nav class="navbar navbar-toggleable-md bg-faded navbar-light">
    ..
</nav>
  • Use navbar-dark to produce light/white colored links and toggler
  • Use navbar-light to produce dark/gray colored links and toggler

In Bootstrap 4.0.0 navbar-toggleable- has changed to navbar-expand-, but navbar-light and navbar-dark still work the same way…

<nav class="navbar navbar-expand-md navbar-light bg-light">
    ..
</nav>

also see: Bootstrap navbar: nothing is displayed on smaller devices

More Related Contents:

  1. Five equal columns in twitter bootstrap
  2. How to extend/modify (customize) Bootstrap with SASS
  3. Center the content inside a column in Bootstrap
  4. How to make the row stretch remaining height
  5. Bootstrap Rows and Columns – Do I need to use row?
  6. Missing visible-** and hidden-** in Bootstrap v4
  7. Responsive website zoomed out to full width on mobile
  8. Left align and right align within div in Bootstrap
  9. Disable responsive (mobile) navbar in Bootstrap
  10. Bootstrap – row can I have columns add up to more then 12?
  11. Wrapping bootstrap columns in extra div
  12. How to create new breakpoints in bootstrap 4 using CDN?
  13. Why is the Bootstrap Navbar always collapsed? [duplicate]
  14. Bootstrap 4 Navbar align logo center and toggle icon on the left
  15. Bootstrap 4 Multiple fixed-top navbars
  16. How to left column fixed and right scrollable in Bootstrap 4, responsive?
  17. Missing visible-** and hidden-** in Bootstrap
  18. How can I center an image in Bootstrap?
  19. Bootstrap 3, 4 and 5 .container-fluid with grid adding unwanted padding
  20. Using media breakpoints in Bootstrap 4-alpha
  21. Bootstrap – I don’t want columns to have the same height
  22. How can I get my Twitter Bootstrap buttons to right align?
  23. Bootstrap 4 responsive navbar vertical
  24. Unable to override $theme-color in bootstrap
  25. Twitter Bootstrap Customization Best Practices [closed]
  26. Bootstrap with different order on mobile version
  27. One tall div next to two shorter divs on Desktop and stacked on Mobile with Bootstrap 4
  28. Bootstrap 4 navbar not collapsing on large screen
  29. How to fix the error; ‘Error: Bootstrap tooltips require Tether (http://github.hubspot.com/tether/)’
  30. How to make a Bootstrap 4 full width dropdown in Navbar?

Leave a Comment