CODEWITHSUNDEEP
menu
Ian
Ian

Reputation: 900

bootstrap social media icons above menu

I am using Bootstrap and trying to get the social media icons above the menu - so far I have: enter image description here

What I am aiming for is something like this: enter image description here

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><a href="#">Sign Up</a></li>
            <li><a href="#">Sign In</a></li>
            <li><a href="#">About</a></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???

Upvotes: 0

Views: 836

Answers (1)

Johannes
Johannes

Reputation: 958

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><a href="#">Sign Up</a></li>
        <li><a href="#">Sign In</a></li>
        <li><a href="#">About</a></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

Upvotes: 1

Related Questions