How to customize bootstrap fixed navbar-default so that li elements align downward?

Question

How to customize bootstrap fixed navbar-default so that li elements align downward? Currently it is aligning at top by default. You can correct my code or show your custom works. You can also show me any repo on codepen jsfiddle or other sites like that.

Thank you in advance.
.

<div class="container-fluid">

<div class="masthead">

    <!-- Fixed navbar -->
    <div class="navbar navbar-default navbar-fixed-top" role="navigation">
        <div class="socialnav">
            <a class="btn" href="http://www.facebook.com/RetinaInc"><i class="fa fa-facebook fa-spin"></i></a>
            <a class="btn" href="http://www.twitter.com/RetinaInc"><i class="fa fa-twitter"></i></a>
            <a class="btn" href="http://www.facebook.com/RetinaInc"><i class="fa fa-linkedin"></i></a>
            <a class="btn" href="http://www.facebook.com/RetinaInc"><i class="fa fa-youtube"></i></a>
            <a class="btn" href="http://www.facebook.com/RetinaInc"><i class="fa fa-google-plus"></i></a>
        </div>
        <!-- /socialnav -->
        <div class="container-fluid">
            <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">
                    <img class="logo" src="img/logo.png" />
                </a>

            </div>
            <!-- /nav header -->
            <div class="col-md-6 ">

            </div>
            <div class="navbar-collapse collapse navbar-right">

                <ul class="nav navbar-nav navtext col-md-offset-6">
                    <li><a href="services.html">Services</a>
                    </li>
                    <li><a href="news.html">News</a>
                    </li>
                    <li><a href="about.html">About</a>
                    </li>
                    <li><a href="contact.html">Contact</a>
                    </li>

                </ul>
            </div>
            <!--/.nav-collapse collapse -->
        </div>
        <!-- /container -->
    </div>
    <!-- /navbar navbar-default navbar-fixed-top -->

</div>
<!-- /masthead -->

Updates: Here is my Custom css - updated again

.navbar-brand{
  width:auto;
  height: auto;
}

 .navbar{
  margin-top: 1%;
  margin-right: 11%;
  margin-left: 11%;
  border-radius: 10px;
}
.navtext{
  position: relative;
  left:20%;
}
.navbar-default {   
  color:#ffffff;
}

.navbar-default .navbar-nav > li > a {
    color:#000;
    padding-left:20px;
    padding-right:20px; 
}
.navbar-default .navbar-nav > .active > a, .navbar-nav > .active > a:hover, .navbar-nav > .active > a:focus {
    color: #ffffff;
  background-color:transparent;
}

.navbar-default .navbar-nav > li > a:hover, .nav > li > a:focus {
    text-decoration: none;
    background-color: #33aa33;
}

.navbar-default .navbar-brand {
    color:#eeeeee;
    width: auto;

}
.navbar-default .navbar-rgba(255,0,0,0.7) toggle {
    background-color:#eeeeee;
}
.navbar-default .icon-bar {
    background-color:#33aa33;
}

.masthead {
  color: #000;
}
.logo {
  width: 40%;
}
.pull {
  margin-bottom: 15%;
}

Answer 1

One way to align text vertically next to an image is to:

.navbar-right{
  position: absolute;
  bottom: 0;
  right: 0;
}

Regardless of the elements around it, this makes the menu links appear to the right bottom corner.

However, this messes up our responsive menu a little so we are going to restore it back when viewed on mobile:

@media only screen and (max-width : 768px) {
   .navbar-right{
      position: relative; 
   }
}

DEMO