I'm trying to find an example of the bootstrap 4 responsive navbar that collapses to a hamburger button only at the xs width but is fully visible when wider.
There's a bootstrap 3 example that Just Works, but nothing for 4 that I've found.
The bootstrap 4 navbar examples page shows a collapsed content version but it's collapsed at all widths.
And below it hints at how to make it work using .navbar-toggler, et. al.
For more complex navbar patterns, like those used in Bootstrap v3, use the .navbar-toggleable-* classes in conjunction with the .navbar-toggler. These classes override our responsive utilities to show navigation only when content is meant to be shown.
I have minimal bootstrap knowledge so any solution I don't want to fight the framework if there's already a sanctioned way to do this.
Edit:
Actually, the Responsive Navbar example below the Collapsible content in bootstrap 4 documentation does exactly what I was looking for using the navbar-toggleable-xs class. I didn't see it earlier because I didn't make the window narrow enough.
In the stable version navbar-toggleable-*
has been renamed to navbar-expand-*
, but the -xs
infix is (still) removed, so in your case you should use navbar-expand
.
Explanation in the docs: https://getbootstrap.com/docs/4.1/components/navbar/#how-it-works
Actually, the Responsive Navbar example below the Collapsible content in Bootstrap 4 documentation does exactly what I was looking for using the navbar-toggleable-xs
class. I didn't see it earlier because I didn't make the window narrow enough.
In Bootstrap 4 alpha 6, it’s now simply navbar-toggleable
without the -xs
.
EDIT: The documentation link is now here: http://v4-alpha.getbootstrap.com/components/navbar/#nav
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With