I am attempting to include Twitter, Google+, and Facebook buttons in a navigation header to have them appear on the right side of the top right corner of the header, positioned above the navigation menu.
My current framework is Bootstrap.
I experimented with the following options:
1) Using a row class 2) Utilizing a table with two rows 3) Trying another ul element
However, none of these methods proved successful. Below is the code snippet without the social media 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;
}