SkullDev SkullDev - 5 months ago 20
CSS Question

Bootstrap nav links way out of place

I have a navbar (using bootstrap 4 css), I have 3 links and a brand.

I expect all of these to be in line but for some reason they are all over the place.

Here is what it looks like:

enter image description here

And here is my current code:



<nav class="navbar navbar-fixed-top">

<!-- Toggle Button -->
<button class="navbar-toggler hidden-sm-up" type="button" data-toggle="collapse" data-target="#nav-content">

</button>

<!-- Nav Content -->
<div class="collapse navbar-toggleable-xs" id="nav-content">
<a class="navbar-brand" href="#">Logo</a>
<ul class="nav navbar-nav">
<li><a href="#search">Search <i class="fa fa-search" aria-hidden="true"></i></a>
</li>
</ul>
<ul class="nav navbar-nav pull-sm-right pull-md-right pull-lg-right">
<li class="nav-item">
<a class="nav-link" href="#">Sign Up</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Log In</a>
</li>
</ul>
</div>

</nav>

<!-- Main jumbotron for a primary marketing message or call to action -->
<div class="jumbotron">
<div class="container">
<p class="text-center">Play button will go here when video is implemented</p>
<div class="col-xs-12 text-center">
<a class="btn btn-primary btn-lg" href="#" role="button">Earn now! &raquo;</a>
</div>
</div>
</div>





I am using proxima nova as my font and yeah, never had this happen before, any ideas?

Answer

Try this: I have added pull-md-left class to first navbar-nav.

<nav class="navbar navbar-fixed-top">

  <!-- Toggle Button -->
  <button class="navbar-toggler hidden-sm-up" type="button" data-toggle="collapse" data-target="#nav-content">
    ☰
  </button>

  <!-- Nav Content -->
  <div class="collapse navbar-toggleable-xs" id="nav-content">
    <a class="navbar-brand" href="#">Logo</a>
    <ul class="nav navbar-nav pull-md-left">
      <li class="nav-item">
         <a href="#search" class="nav-link">Search <i class="fa fa-search" aria-hidden="true"></i></a>
      </li>
    </ul>
    <ul class="nav navbar-nav pull-sm-right pull-md-right pull-lg-right">
      <li class="nav-item">
        <a class="nav-link" href="#">Sign Up</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Log In</a>
      </li>
    </ul>
  </div>

</nav>

<!-- Main jumbotron for a primary marketing message or call to action -->
<div class="jumbotron">
  <div class="container">
    <p class="text-center">Play button will go here when video is implemented</p>
    <div class="col-xs-12 text-center">
      <a class="btn btn-primary btn-lg" href="#" role="button">Earn now! &raquo;</a> 
    </div>
  </div>
</div>
Comments