Add Separator In Collapsed Nav Bootstrap - html

Question

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>Home</li>
<li>About</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Log In</li>
<li>Sign Up</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>Home</li>
<li>About</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li role="separator" class="divider"></li>
<li>Log In</li>
<li>Sign Up</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:

Answer 1

In Bootstrap v4.0.0-alpha.6, you can use
<div class="dropdown-divider"></div>
jsFiddle

Answer 2

It does not show up as It is defined as follows in Bootstrap css:
.dropdown-menu .divider {
height: 1px;
margin: 9px 0;
overflow: hidden;
background-color: #e5e5e5;
}
And you do not have .divider under .dropdown-menu
What you should do ?
#media (max-width:767px){
.divider {
height: 1px;
margin: 9px 0;
overflow: hidden;
background-color: #e5e5e5;
}
}

Answer 3

You have to put this code:
<li role="separator" class="divider"></li>
between your own "< li >" tags.
Example:
<ul class="dropdown-menu" aria-labelledby="drop2">
<li> Your own Li Tags</li>
<li> Your own Li Tags</li>
<li> Your own Li Tags</li>
<li role="separator" class="divider"></li>
<li> Your own Li Tags</li>
<li> Your own Li Tags</li>
</ul>

Answer 4

Boostrap 4.1 Solution
Was trying to accomplish this in a BS4.1 Navbar component and ended up here (via Google). Since .divider does not exist in this version, I used <hr> to achieve the desired result...
<ul class="navbar-nav">
<li class="nav-item"><a class="nav-link" href="https://www.sociallinkgenerator.com/#generator">Social Links</a></li>
<li class="nav-item"><a class="nav-link" href="https://www.sociallinkgenerator.com/facebook-link-generator/#opengraph-generator">Open Graph</a></li>
<li class="nav-item"><a class="nav-link" href="https://www.sociallinkgenerator.com/twitter-link-generator/#twitter-card-generator">Twitter Cards</a></li>
<li class="nav-item"><a class="nav-link" href="/json-ld-generator#json-ld-generator">JSON-LD</a></li>
<li class="nav-item"><hr class="border-top"></li>
<li class="nav-item"><a class="nav-link" href="https://www.sociallinkgenerator.com/#donation">Feeling Generous?</a></li>
<li class="nav-item"><a class="nav-link" href="https://www.sociallinkgenerator.com/#contact">Need a Developer?</a></li>
</ul>
Bonus: This <hr> did not affect expanded display since its margins place it behind the next .nav-item element :)
Note: .border-top was added to the <hr> for lighter color.

Answer 5

you may insert an
<hr>
Tag instead of your divider like this:
<ul class="nav navbar-nav navbar-right">
<hr>
<li>Log In</li>
<li>Sign Up</li>
</ul>
Please tell me if it is as you wanted.

Answer 6

If you don't want to touch css there is little hack for it :D.
Instead of
<li role="separator" class="divider"></li>
use this
<form class="navbar-form navbar-left" style="padding:0px; border-top-width:0px;"></form>
Bootstrap gives forms 1px borders on top and bottom when collapsed. You can use this and insert empty form which is invisible while expanded but with one border while collapsed.