Bootstrap Navbar-Static-Top Menu Breaks on Two Lines

Bootstrap navbar breaking in two rows issue

Add navbar-left to the collapse nav div

<div class="collapse navbar-collapse navbar-left" id="bs-example-navbar-collapse-1">

Twitter Bootstrap 3 - Navbar Fixed Top - Overlaps content when multiple lines

$(window).on('resize load', function() {
    $('body').css({"padding-top": $(".navbar").height() + "px"});
});

http://jsbin.com/iJaJAzIM/2/edit

Bootstrap 4 - prevent links from breaking lines on navbar

Use the text-nowrap utility class on the links...

https://www.codeply.com/go/tKwvJnDJ42

<nav class="navbar navbar-expand-lg navbar-light fixed-top">
    <div class="container">
        <a class="navbar-brand mx-auto" href="#">
            Logo
        </a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse text-right" id="navbarTogglerDemo02">         
            <ul class="navbar-nav ml-auto mt-2 mt-lg-0">
                <li class="nav-item main-nav">
                    <a class="nav-link text-nowrap" href="#">Navbar Link Number 1</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link text-nowrap" href="#">Navbar Link Number 2</a>
                </li>
                <li class="nav-item">
                    <a  class="nav-link text-nowrap" href="#">Navbar Link Number 3</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link text-nowrap" href="#">Navbar Link Number 4</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link text-nowrap" href="#">Navbar Link Number 5</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link text-nowrap" href="#">Navbar Link Number 6</a>
                </li>
           </ul>
        </div>
    </div>
</nav>

Bootstrap line break between nav bar

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>

Bootstrap NavBar not collapsing as expected - separating onto two lines

The nav is wrapping in to 2 lines because you have many menu items and the Bootstrap container switches to 750px as the screen width shrinks. You have 2 options..

One option is to use the full width container-fluid (this may not work for your design):
http://codeply.com/go/TfbwIivilI

Another option is to decrease the point at which the navbar collapses. This requires CSS to override the default navbar collapse point. In your case around 1000px seems to work best:
http://codeply.com/go/kcaXYh7ARB