Social Media icons appearing to the right instead of bottom for bootstrap responsive layout

Question

For wider screens, the social media icons are aligned to the right. However, after collapsing, they get placed awkwardly at the side of the menu items instead of the bottom.

How do I get it to the bottom?

Here's the header code

                <nav class="navbar navbar-inverse navbar-fixed-top">
                <div class="container-fluid">
                  <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar">
                      <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="#"><img src="img/logo2.png" alt="TTO">
                    </a>
                  </div>
                  <div id="navbar" class="navbar-collapse collapse">
                    <ul class="nav navbar-nav">
                        <li><a class="page-scroll nav-text" href="#about">About</a></li>
                        <li><a class="page-scroll nav-text" href="#services">Services</a></li>
                        <li><a class="page-scroll nav-text" href="#bikerentals">Bike Rentals</a></li>
                        <li><a class="page-scroll nav-text" href="#gallery">Packages</a></li>
                        <li><a class="page-scroll nav-text" href="#contact">Contact</a></li>
                    </ul>
                               <!-- social media icons -->
                    <ul class="nav navbar-nav navbar-right nav-pills">
                        <li><a href="#"><i class="fa fa-lg fa-facebook"></i></a></li>
                        <li><a href="#"><i class="fa fa-lg fa-google-plus"></i></a></li>
                        <li><a href="#"><i class="fa fa-lg fa-linkedin"></i></a></li>
                   </ul>
                  </div>

                  <!--/.nav-collapse -->
                </div>
                <!--/.container-fluid -->
              </nav>

Here's how it looks like

Here's my CSS

        body {
         font-family: 'Lato',sans-serif;   
        }

        .navbar-brand {
            padding: 40px 40px;  
            margin-top: 0px;  
            height: 20px; 
        }

        .navbar-brand>img {
           max-height: 100%;
           height: 100%;
           width: auto;
           margin: 0 auto;


        }


        .navbar .navbar-nav {
          display: inline-block;
          float: none;
          vertical-align: middle;
        }



        .navbar .navbar-collapse {
          text-align: center;
        }



            /* Get rid of link padding to make the above easier */
            .navbar-nav>li>a {
                 padding-top:0px;
                 padding-bottom:0px;
            }


            .navbar-brand, .navbar-nav>li>a {
                height: 67px;
                line-height: 67px;
            }


           /*EDIT top and bottom padding to shrink and grow image */
           .navbar-brand { 
                padding: 0px 0px;
                margin-top: 5px;
           }

        .nav-text{
            font-size: 20px;
        }

        .navbar-inverse .navbar-collapse, .navbar-inverse .navbar-form {
            border-color: #beafaf;
        }

Answer 1

I think you should try removing navbar-right from your ul.

Answer 2

One option is to limit some of your rules to a media query above 768px so your mobile navbar isn't exposed to the rules that are causing the problems.

See working example Snippet.

body {
  font-family: 'Lato', sans-serif;
}
@media (min-width: 768px) {
  .navbar.navbar-inverse .navbar-nav {
    display: inline-block;
    float: none;
    vertical-align: middle;
  }
  .navbar.navbar-inverse .navbar-nav>li>a {
    padding-top: 0px;
    padding-bottom: 0px;
  }
  .navbar.navbar-inverse .navbar-nav>li>a {
    height: 67px;
    line-height: 67px;
  }
}
.navbar.navbar-inverse .navbar-toggle {
  margin-top: 15px;
}
.navbar.navbar-inverse .navbar-brand>img {
  max-height: 100%;
  height: 100%;
  width: auto;
  margin: 0 auto;
}
.navbar.navbar-inverse .navbar-brand {
  padding: 0px 0px;
  margin-top: 0px;
  height: 67px;
}
.navbar.navbar-inverse .nav-text {
  font-size: 20px;
}
.navbar.navbar-inverse .navbar-collapse,
.navbar.navbar-inverse .navbar-form {
  border-color: #beafaf;
}
.navbar.navbar-inverse .navbar-collapse {
  text-align: center;
}
.navbar.navbar-inverse .navbar-right.nav-pills li {
  text-align: center;
  float: none;
  display: inline-block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-inverse navbar-fixed-top">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar"> <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="#">
        <img src="http://placehold.it/67x67/f00" alt="TTO">
      </a>

    </div>
    <div id="navbar" class="navbar-collapse collapse">
      <ul class="nav navbar-nav navbar-left">
        <li><a class="page-scroll nav-text" href="#about">About</a>

        </li>
        <li><a class="page-scroll nav-text" href="#services">Services</a>

        </li>
        <li><a class="page-scroll nav-text" href="#bikerentals">Bike Rentals</a>

        </li>
        <li><a class="page-scroll nav-text" href="#gallery">Packages</a>

        </li>
        <li><a class="page-scroll nav-text" href="#contact">Contact</a>

        </li>
      </ul>
      <ul class="nav navbar-nav navbar-right nav-pills">
        <li><a href="#"><i class="fa fa-lg fa-facebook"></i></a>

        </li>
        <li><a href="#"><i class="fa fa-lg fa-google-plus"></i></a>

        </li>
        <li><a href="#"><i class="fa fa-lg fa-linkedin"></i></a>

        </li>
      </ul>
    </div>
  </div>
</nav>