Bootstrap 3 Navbar menu item alignment

Question

Site : http://www.Spotlightdd.co.uk

I have a navbar that has an increased size due to the logo in the middle. The logo has a -margin value to line it up with the bottom border (I know it's out by a few px). What i'm trying to do is move the text down without just increasing the size of the navbar, so it looks more centered in the navbar. Currently, i've tried using margin/padding.line-height, anything i can think of that would only move the text to no avail. If someone could try a hand at sorting it, that would be brilliant.

Thanks

(Navbar html)

<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
        <div class="container">
            <div class="navbar-header">
                <a class="navbar-brand" href="#">
                    <img alt="CompanyLogo" src="img/spotlightLogo.png" style = "height: 80px" >
                </a>
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
            </div>
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav nav-center">
                    <li><a href="index.html"> HOME </a></li>
                    <li><a href="web-design.html"> WEB DESIGN</a></li>
                    <li><a href="graphic-design.html"> GRAPHIC DESIGN </a></li>
                    <li><a href="social-media.html"> SOCIAL MEDIA </a></li>        
                    <li class = "logo"><a href = "index.html"> <img src = "img/spotlightLogo.png" class = "headerLogo img-responsive"  alt = "spotlight" style = "height: 150px;"></a></li>
                    <li><a href="printing.html"> PRINTING </a></li>
                    <li class="active"><a href="#"> BRANDING </a></li>
                    <li><a href="video-production.html"> VIDEO PRODUCTION </a></li>  
                    <li><a href="contact.html"> CONTACT </a></li>
                </ul>
            </div><!-- /.navbar-collapse -->
        </div><!-- /.container-fluid -->
    </nav>

(Navbar CSS)

.navbar-default {
    border-bottom: 3px solid #CE1344;
    background-image: none;
    background-color: white;
}
.navbar .navbar-nav {
  text-align: center;
  display: inline-block;
  float: none;
  vertical-align: top;
}
li > a {
    margin-top: 0px;
}
.navbar .navbar-nav {
  display: inline-block;
  float: none;
  vertical-align: top;
}

.navbar .navbar-collapse {
  text-align: center;
}
.headerLogo {
    margin-bottom: -50px;
}

I tried to put in every bit of code relevant. Apologies because the css file is a mess at the moment.

Answer 1

Try adding this to your css:

.navbar-nav>li{
 padding: 20px 0;
} 
.navbar-nav>li.logo{
 padding: 0
};

This should do the trick.

Answer 2

Try this:

.nav-center{
  position: relative;
  top: 20px;
}
li.logo {
  position: relative;
  bottom: 22px;
}