CODEWITHSUNDEEP
htmlcsstwitter-bootstrapnavbar
Stephen
Stephen

Reputation: 523

Bootstrap Collapse Navbar - Pulling Text Left

So... When my Navbar is on a Desktop or Laptop screen I want the text to be pulled right which is what I have done, but when they are viewing my Website from a Phone I collapse the Navbar. When the Navbar is collapsed I would like the text to be pulled left instead of right I just can't find a way to do it.

I've tried text-align but obviously that only aligns the text whereas I want it being pull left when it is shown on a Phone screen.

<!-- Navbar -->
<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-2" 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="#">Web Designs</a>
    </div>

    <div class="navbar-collapse collapse" id="bs-example-navbar-collapse-2" aria-expanded="false" style="height: 1px;">
      <ul class="nav navbar-nav pull-right">
        <li><a href="#">Home</a>
        </li>
        <li><a href="#">Projects</a>
        </li>
        <li><a href="#">Contact</a>
        </li>
      </ul>
    </div>
</nav>
<!-- /.End of Navbar -->

Upvotes: 0

Views: 2232

Answers (1)

nikola_wd
nikola_wd

Reputation: 607

When you add the pull-right class it actually floats the element to the right...So in order to make it appear on the left hand side on smaller devices you should target the desired device width and float it to the left, like this:

   @media screen and (max-width: 767px) {
      .navbar-nav {
         float: left !important;
      }
   }

This should work for you :)

Upvotes: 2

Related Questions