bootstrap social media icons above menu - menu

Question

I am using Bootstrap and trying to get the social media icons above the menu - so far I have:
What I am aiming for is something like this:
So the image is at the end - and the menu items are still responsive.
The code I have so far is :
<header class="navbar navbar-inverse header-outer" role="banner">
<div class="container">
<img src="logo1.png " alt="Image" id="logo" class="img-responsive pull-left" />
<div class="social_media">
<ul class="nav navbar-nav pull-left padding-top nextline">
<li><img src="facebook.png" /></li>
<li><img src="twitter.png" /></li>
<li><img src="linkdin.png" /></li>
<li><img src="instagram.png" /></li>
</ul>
</div>
<div class="pull-left padding-top">
<ul class="nav navbar-nav navbar-right">
<li>Sign Up</li>
<li>Sign In</li>
<li>About</li>
</ul>
</div>
<button style="position:relative; left:0;">CONTACT WITH US</button>
</div>
</header>
and the CSS is:
<style>
.social_media {
width: 100%;
}
.navbar{ background:#ffffff; border:none;}
.nextline {
width:80%;
border-bottom : 1px solid #000000;
}
</style>
Has anyone done anything like this???

Answer 1

You have to put another div around the lower part to group it. Only then you can assure that the contact button can be inline with your underline of the social media section, as you set the width to the same as your nextline class. This way you get a container for the part below the line, that has the same width, and you can align the button as you want.
So your code should look like
<div class="pull-left padding-top" style="width:80%">
<div class="pull-left padding-top">
<ul class="nav navbar-nav navbar-right">
<li>Sign Up</li>
<li>Sign In</li>
<li>About</li>
</ul>
</div>
<button class="pull-right padding-top">CONTACT WITH US</button>
</div>
A simple jsfiddle for whole code
https://jsfiddle.net/87xz8q9x/5/
Hope this helps