Given the code below is the supposed behavior that the button is hidden at lg
and xl
; while the collapsed content is only toggeable at md
or is it toggeable from md
downto xs
? Can someone help explain this?
<nav class="navbar navbar-light bg-faded">
<button class="navbar-toggler hidden-lg-up" type="button" data-toggle="collapse" data-target="#exCollapsingNavbar2">
☰
</button>
<div class="collapse navbar-toggleable-md" id="exCollapsingNavbar2">
<a class="navbar-brand" href="#">Responsive navbar</a>
<ul class="nav navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
</ul>
</div>
</nav>
2
Answers
It becomes toggleable at medium and is from medium down.
The
navbar-toggleable-*
means that *from * down it is able to be toggled*.I have been working with this today, and that is the behavior that I have seen and is described in bootstrap docs
Used navbar-expand- This means it always in collapsed mode