Menu
I am trying to add a separator in the collapsed nav when viewed on mobile. Ideally the nav would look exactly the same as it does not when not collapsed, but when collapsed would have a separator between "About" and "Log In".
Here is the code for the nav:
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#main-navbar" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Company</a>
</div>
<div class="collapse navbar-collapse" id="main-navbar">
<ul class="nav navbar-nav">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Log In</a></li>
<li><a href="#">Sign Up</a></li>
</ul>
</div>
</div>
</nav>
JSFiddle
I have tried adding <li role="separator" class="divider"></li> where I want the separator, but it does not show up:
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#main-navbar" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Company</a>
</div>
<div class="collapse navbar-collapse" id="main-navbar">
<ul class="nav navbar-nav">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li role="separator" class="divider"></li>
<li><a href="#">Log In</a></li>
<li><a href="#">Sign Up</a></li>
</ul>
</div>
</div>
</nav>
JSFiddle
How can I add a separator for the collapsed nav?
This separator would hopefully look very similar to that of a dropdown in a nav:
450
As of Bootstrap 4, you can use the spacing utilities. Add for instance px-2 in the classes of the nav-item to increase the padding.
To do this you remove the default border from the textarea and instead adding a border etc to a div that is the parent of that textarea. To get the whitespace you just add bottom padding to the parent div. Here's an example: <div style="border: 1px solid #999; padding: 10px 10px 50px 10px;">
To create a collapsible navigation bar, use a button with class="navbar-toggler", data-toggle="collapse" and data-target="#thetarget" . Then wrap the navbar content (links, etc) inside a div element with class="collapse navbar-collapse" , followed by an id that matches the data-target of the button: "thetarget".
In Bootstrap v4.0.0-alpha.6, you can use
<div class="dropdown-divider"></div>
jsFiddle
92
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
