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 

[![enter image description here](https://i.stack.imgur.com/EhbYA.png)](https://i.stack.imgur.com/EhbYA.png)

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;
        }

```