CODEWITHSUNDEEP
twitter-bootstrap
Calyce
Calyce

Reputation: 13

Position contents of collapsing Bootstrap 3 navbar

I'm trying to create a navbar that partially collapses. In the alignment of elements on the navbar, the icon is in the wrong position. I would like the icon to be on the right, just in front of the collapse button, as shown in the below image.

desired image.

I have tried lots of different combination but have been unable to position it correctly.

How do I move the icon to the other side of the navbar?

Below is my code and the undesired output with the icon on the left

undesired output
(source: geekgirls.org)
.

<nav class="navbar navbar-default">
<div class="container">
    <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <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="btn navbar-btn navbar-right btn-social-icon btn-xs btn-twitter">
              <i class="fa fa-twitter"></i>
          </a>
      <a class="navbar-brand" href="#">{{title}}</a>
    </div>
    <div id="navbar" class="navbar-collapse collapse">
        <ul class="nav navbar-nav pull-right">
            <li><a href="#">Item 1</a></li>
            <li><a href="#">Item 2</a></li>
            <li><a href="#">Item 3</a></li>
            <li><a href="#">Item 4</a></li>
        </ul>
    </div><!--/.nav-collapse -->
</div><!--/.container-fluid -->

Upvotes: 1

Views: 363

Answers (1)

aleksandar
aleksandar

Reputation: 2399

Just add the class pull-right to the button containing the icon.

<a class="btn navbar-btn navbar-right btn-social-icon btn-xs btn-twitter pull-right">
    <i class="fa fa-twitter"></i>
</a>

Upvotes: 1

Related Questions