Recently, I've been delving into Bootstrap and experimenting with coding a basic website. Below is the code for the navbar:
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<div>
<ul class="nav navbar-nav">
<li><a href="#"><i class="fa fa-facebook fa-lg"></i></a></li>
<li><a href="#"><i class="fa fa-linkedin fa-lg"></i></a></li>
<li><a href="#"><i class="fa fa-instagram fa-lg"></i></a></li>
</ul>
</div>
<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">
<div>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">About</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</div><!--/.navbar-collapse -->
</div>
</nav>
My goal is to keep the first div (the one with social media links) in line when the navbar collapses. I've attempted to change the CSS by setting it to float: left;
I've also tried using pull-left on the div and pull-right on the unordered list.
Here is the image of the navbar before collapsing: Navbar Image 1
And here is how the navbar looks after collapsing: Navbar Image 2