How to add social media buttons to bootstrap nav

Question

I am trying to add Twitter, Google+ and Facebook buttons to a navigation header so that they appear on the right of the top right corner of the header, on a line above the nav menu.

I am using Bootstrap.

I tred the forllowing:

1) row class 2) table with two rows 3) another ul

Non of these worked. Please find below the code without the social button links.

HTML:

<div class="nav">
  <div class="container">
    <span class="pull-left">
      <a href="home.html">
          <img src="images/logo150.png" width="150">
      </a>
    </span>
    <ul class="pull-right">
      <li><a class="active" href="home.html">Get Muse</a></li>
      <li><a href="page1.html">Page1</a></li>
      <li><a href="page2.html">Page2</a></li>
      <li><a href="page3.html">Page3</a></li>
    </ul>
  </div>
</div>

CSS:

.nav .pull-right {
  padding-top: 40px;
}

.nav {
  border-bottom: 1px solid #dbdbdb;
}

.nav a {
  color: #5a5a5a;
  font-size: 14px;
  padding: 14px 10px;
  text-transform: uppercase;
}

.nav li {
  display: inline;
}

Solution

If you're using Bootstrap, I would suggest sticking to Bootstrap classes as much as possible, and making the grid your new BFF. Learning the ins and out of the grid will save you hours and hours of customization.

With that in mind, I think you should stack your two rows of nav items (social links and then nav links) within a right-pulled grid class (I chose col-xs-8 somewhat arbitrarily in my example).

And then use http://fontawesome.io for your social icons.

<div class="col-xs-8 pull-right text-right">
<ul>
  <li><a href="#"><i class="fa fa-stack-overflow"></i></a></li>
  <li><a href="#"><i class="fa fa-twitter"></i></a></li>
  <li><a href="#"><i class="fa fa-facebook"></i></a></li>
  <li><a href="#"><i class="fa fa-google-plus"></i></a></li>
</ul>
<ul class="pad-top">
  <li><a class="active" href="home.html">Get Muse</a></li>
  <li><a href="page1.html">Page1</a></li>
  <li><a href="page2.html">Page2</a></li>
  <li><a href="page3.html">Page3</a></li>
</ul>

I had to guess at some of your needs (button style, height of your logo-img), but this example should get you on the right track: http://www.bootply.com/27qTRDLOKw

Comments

[alexyes]

Thanks! Btw, the second link does not seem to work (bootply.com/27qTRDLOKw)

[Shawn Taylor]

You bet! the link works for me. bootply has quite a bit of downtime, so must have been that...