Make Social Media Buttons Horizontal on Bootstrap mobile dropdown

Vote count:

0

How would I go about getting the social media buttons to align next to each other (horizontal) in the mobile mode on the drop down menu.

Whenever someone clicks on the mobile drop down menu it currently lists these icons vertically. I want them horizontal.

Here is my code for the menu div.

<div class="container">
  <div class="header">
    <ul class="nav nav-pills pull-right">
      <li class="active"></li>
      <li></li>
      <li></li>
    </ul>
    <div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
          <a class="navbar-brand" href="index.html">Welcome </a> </div>
        <div class="navbar-collapse collapse">
          <ul class="nav navbar-nav">
            <li class="active"><a href="index.html">Home</a></li>
            <li><a href="http://ift.tt/1iI08k7">Broadmark Partners</a></li>
            <li><a href="http://ift.tt/1nIW8fE">Blog</a></li>
            <li class="dropdown">
              <ul class="dropdown-menu">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li class="divider"></li>
                <li class="dropdown-header">Nav header</li>
                <li><a href="#">Separated link</a></li>
                <li><a href="#">One more separated link</a></li>
              </ul>
            </li>
          </ul>
          <ul class="nav navbar-nav navbar-right">
            <li>
            <a href="http://facebook.com/" class="btn btn-social-icon btn-facebook">
                <i class="fa fa-facebook"></i>
            </a>
            </li>
            <li>
            <a href="http://twitter.com/" class="btn btn-social-icon btn-twitter" >
                <i class="fa fa-twitter"></i>
            </a>
            </li>
                            <li>
            <a href="http://ift.tt/MHpdur"  class="btn btn-social-icon btn-linkedin">
                <i class="fa fa-linkedin"></i>
            </a>
            </li>
                            <li>
            <a href="http://ift.tt/1nIW92W" class="btn btn-social-icon btn-github">
                <i class="fa fa-github"></i>
            </a>
            </li>
          </ul>
        </div>
        <!--/.nav-collapse -->
      </div>
    </div>
    <h3 class="text-muted">&nbsp;</h3>
    <p>&nbsp;</p>
  </div>

asked 42 secs ago

user3777543

1