How can I pull my social media icons to the right in my navbar?

Question

I am using bootstrap and below is my code for my navbar. I've added font awesome icons, but I want that to be pulled to the right. I can't seem to pull it to the right without throwing the Home, About, and Contact out of whack. Any idea?

 <nav class="navbar navbar-inverse navbar-fixed-top">
   <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>
     <div id="navbar" class="navbar-collapse collapse">
       <ul class="nav navbar-nav navbar-left">
         <li class="active"><a href="#">Home</a></li>
         <li><a href="#about">About</a></li>
         <li><a href="#contact">Contact</a></li>
         <li><a href="#"><i class="fa fa-camera-retro fa-lg"></i>
         <li><a href="#"><i class="fa fa-twitter fa-lg"></i>
         <li><a href="#"><i class="fa fa-pinterest fa-lg"></i>
           </ul>
         </li>
       </ul>
     </div><!--/.nav-collapse -->
   </div>
 </nav>

Solution 1

Bootstrap 4

Navbar alignment is easier in Bootstrap 4. You would just use ml-auto on the navbar-nav with the social icons to push it to the right...

<nav class="navbar navbar-dark bg-dark fixed-top navbar-expand-md">
    <div class="container">
        <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <span class="sr-only">Toggle navigation</span> ☰
        </button>
        <div id="navbar" class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
                <li class="active">
                    <a href="#" class="nav-link">Home</a>
                </li>
                <li>
                    <a href="#about" class="nav-link">About</a>
                </li>
                <li>
                    <a href="#contact" class="nav-link">Contact</a>
                </li>
            </ul>
            <ul class="nav navbar-nav ml-auto">
                    <a href="#" class="nav-link"><i class="fa fa-camera-retro fa-lg"></i></a>
                <li>
                    <a href="#" class="nav-link"><i class="fa fa-twitter fa-lg"></i></a>
                <li>
                    <a href="#" class="nav-link"><i class="fa fa-pinterest fa-lg"></i></a>
                </li>
            </ul>
        </div>
        <!--/.nav-collapse -->
    </div>
</nav>

Bootstrap 4 Navbar icons right demo

---

Bootstrap 3.x (original answer)

There are a few things wrong with the markup. Take the navbar-collapse out of navbar-header. Close the <a href> tags properly inside the <li>. Use navbar-right to pull the icons to the right.

<nav class="navbar navbar-inverse navbar-fixed-top">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" 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>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">Home</a></li>
                <li><a href="#about">About</a></li>
                <li><a href="#contact">Contact</a></li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#"><i class="fa fa-camera-retro fa-lg"></i></a></li>
                <li><a href="#"><i class="fa fa-twitter fa-lg"></i></a></li>
                <li><a href="#"><i class="fa fa-pinterest fa-lg"></i></a></li>
            </ul>
        </div>
    </div>
</nav>

Working demo: http://codeply.com/go/zb1PvhcJHs

Solution 2

Why not doing it this way? Make a new navbar.

<nav class="navbar navbar-inverse navbar-fixed-top">
   <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>
     </div>
     <div id="navbar" class="navbar-collapse collapse">
       <ul class="nav navbar-nav navbar-left">
         <li class="active"><a href="#">Home</a></li>
         <li><a href="#about">About</a></li>
         <li><a href="#contact">Contact</a></li>    
       </ul>
       <ul class="nav navbar-nav navbar-right">
         <li><a href="#"><i class="fa fa-camera-retro fa-lg"></i></a></li>
         <li><a href="#"><i class="fa fa-twitter fa-lg"></i></a></li>
         <li><a href="#"><i class="fa fa-pinterest fa-lg"></i></a></li> 
       </ul>
     </div><!--/.nav-collapse -->
  </div>
</nav>

Demo

Comments

[Diana Bohorquez]

Sure! How can I do that? I'm new to this website.

[Muddasir Abbas]

i want navigation under social icon and logo left. please guide me if you guys can. Thanks