How do I make the Brand, links, and facebook link on the same line? Bootstrap 3

Question

I changed my Code. I moved the Facebook link into its own <ul> bracket and then did a .navbar-right class for that <ul> element. This moved the facebook link to the right side just as I wanted. I deleted my CSS code that I had before. Now I am trying to get the Links to center on the screen with the brand on the left. How do I center the links?

<body>

<nav class="navbar navbar-default navbar-inverse navbar-fixed-top ">
 <div class="container-fluid" id="center-nav">
   
   <!-- Brand and toggle get grouped for better mobile display -->
   <div class="navbar-header">
    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" 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="#">Brnich Karate</a>
   </div>
   
   <!-- Collect the nav links, forms, and other content for toggling -->
   <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
    <ul class="nav navbar-nav">
     <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
     <li><a href="#">Link</a></li>
     <li><a href="#">Link</a></li>
     <li><a href="#">Link</a></li>
    </ul> 
    
   <ul class="navbar-right"> 
             <li class="social"><a href="#" class="btn btn-inverse btn-lg"><i class="fa fa-facebook-square"></i>Find us on Facebook</a></li>
             </ul>
    
   </div>
   
   
 </div>
</nav>


<script src="js/jquery-1.11.3.min.js"></script>
<script src="js/bootstrap.min.js"></script>

</body>

I delete my css posted here and then its all in one line. But how do I move the links to center and the facebook link to the right side? — Olympus, Nov 25 '15 at 23:31

score 1 · Accepted Answer · edited May 23 '17 at 11:44

You need to move your facebook link to a seperate <ul> list within your navbar and pull it right using navbar-right.

<ul class="nav navbar-nav">
    <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
 </ul> 
 <ul class="nav navbar-nav navbar-right">
    <li class="social">
        <a href="#" class="btn btn-inverse btn-lg">
            <i class="fa fa-facebook-square"></i>Find us on Facebook
        </a>
    </li>
</ul>

Then you need to set your navbar to center it's content as per this question: Center content in responsive bootstrap navbar

@media (min-width: 768px) {
    .navbar .navbar-nav {
        display: inline-block;
        float: none;
        vertical-align: top;
    }

    .navbar .navbar-collapse {
       text-align: center;
    }
}

See Demo JSFiddle: https://jsfiddle.net/o8xyq519/1/

In the JSFiddle it does but I think that is because the box is so small that the "Facebook" text might push it left a touch. When I create it in a new page it's certainly in the middle (according to Chrome and IE dev tools anyway). — Pete, Nov 26 '15 at 01:36

How do I make the Brand, links, and facebook link on the same line? Bootstrap 3

1 Answers1