CODEWITHSUNDEEP
htmltwitter-bootstrapcss
Olympus
Olympus

Reputation: 65

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

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>

Upvotes: 0

Views: 211

Answers (1)

Pete
Pete

Reputation: 1115

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/

Upvotes: 1

Related Questions