Bootstrap line break between nav bar

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"><a href="#">Home</a></li>       
        <li><a href="#about">About</a></li>
        <li><a href="#about">Login</a></li>
        <li><a href="#about">Become A member</a></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

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!

Answer 2

This can be achieved by setting borders.

HTML:

<ul class="navbar-nav mr-auto">
  <li class="nav-item">
    <a href="/about" class="nav-item nav-link">About us</a>
  </li>

  <li class="nav-item">
    <a href="/services" class="nav-item nav-link">Our Services</a>
  </li>

  <li class="nav-item">
    <a href="/solutions" class="nav-item nav-link active is-active">Solutions</a>
  </li>

  <li class="nav-item">
    <a href="/contact" class="nav-item nav-link">Contact</a>
  </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

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"><a href="#">Home</a>
        </li>
        <li><a href="#about">About</a>
        </li>
        <li><a href="#about">Login</a>
        </li>
        <li><a href="#about">Become A member</a>
        </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><a href="#">Home</a>
        </li>
        <li><a href="#about">About</a>
        </li>
        <li><a href="#about">Login</a>
        </li>
        <li><a href="#about">Become A member</a>
        </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><a href="#">Home</a>
        </li>
        <li><a href="#about">About</a>
        </li>
        <li><a href="#about">Login</a>
        </li>
        <li><a href="#about">Become A member</a>
        </li>
      </ul>
    </div>
    <!--/.nav-collapse -->
  </div>
</div>