Bootstrap line break between nav bar - html

Question

I am trying to use bootstrap so that i can make a line break between each of my nav menu.
For example:
Hi | Hi1 | h3
I need it so that the bar at the end also does not show after h3.
I have tried this so far but its not working, its pushing all the nav functions down to the bottom.
HTMKL:
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="logo">
<img src="Image/Logo.png" class="img-responsive"/>
</div>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active">Home</li>
<li>About</li>
<li>Login</li>
<li>Become A member</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
CSS:
.navbar-default .navbar-nav > li + li:before {
content: "";
display: inline-block;
vertical-align: middle;
border-left: 1px solid #ffffff;
height: 2.5em;
}
For some reason it does create the lines but it pushs all my texts down. Thanks for all the help.

Answer 1

Here's an example of how you can do this with pseudo elements (:after). You dont need the positioning rules your currently using (which are the cause of your misaligned links). Use position: absolute and apply a height.
As far as the last li, use :last-child:after to remove the border.
See MDN Pseudo-elements
Working example Snippet (with Active class)
#media (min-width: 768px) {
.navbar.navbar-default .navbar-nav .active:after {
content: "";
border: none;
}
.navbar.navbar-default .navbar-nav > li:after {
content: "";
border-right: 2px solid #000;
position: absolute;
height: 50%;
right: 0;
top: 25%;
}
.navbar.navbar-default .navbar-nav > li:last-child:after {
border: none;
}
}
.navbar.navbar-default .navbar-brand {
padding-top: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<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">
<img src="http://placehold.it/50x50" />
</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active">Home
</li>
<li>About
</li>
<li>Login
</li>
<li>Become A member
</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
</div>
Working example Snippet without Active
#media (min-width: 768px) {
.navbar.navbar-default .navbar-nav .active:after {
content: "";
border: none;
}
.navbar.navbar-default .navbar-nav > li:after {
content: "";
border-right: 2px solid #000;
position: absolute;
height: 50%;
right: 0;
top: 25%;
}
.navbar.navbar-default .navbar-nav > li:last-child:after {
border: none;
}
}
.navbar.navbar-default .navbar-brand {
padding-top: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<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">
<img src="http://placehold.it/50x50" />
</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li>Home
</li>
<li>About
</li>
<li>Login
</li>
<li>Become A member
</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
</div>
Example Snippet Mobile
.navbar.navbar-default .navbar-nav .active:after {
content: "";
border: none;
}
.navbar.navbar-default .navbar-nav > li:after {
content: "";
border-right: 2px solid #000;
position: absolute;
height: 50%;
top: 25%;
}
#media (min-width: 768px) {
.navbar.navbar-default .navbar-nav > li:after {
right: 0;
}
.navbar.navbar-default .navbar-nav > li:last-child:after {
border: none;
}
}
.navbar.navbar-default .navbar-brand {
padding-top: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<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">
<img src="http://placehold.it/50x50" />
</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li>Home
</li>
<li>About
</li>
<li>Login
</li>
<li>Become A member
</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
</div>

Answer 2

This can be achieved by setting borders.
HTML:
<ul class="navbar-nav mr-auto">
<li class="nav-item">
About us
</li>
<li class="nav-item">
Our Services
</li>
<li class="nav-item">
Solutions
</li>
<li class="nav-item">
Contact
</li>
</ul>
SCSS
.navbar-nav {
li.nav-item {
.is-active {
color: $blue;
border-bottom: 2px solid $violet;
}
.nav-link {
margin: 0 8px;
padding: 0;
}
// for nav navbar-expand-lg
#include media-breakpoint-up(lg) {
border-right: 2px dotted $black;
&:last-child {
border-right: none;
}
}
}
}
This will display a border line to the right, also hides for the last.

Answer 3

This is so inane but I it might help someone else. I had <br> blending in after the navbar item link, and it took me forever to spot. Be wary of any errant <br> tags!