Navbar Button doesn't vertically align - html

Question

i have been playing around with bootstrap to setup a navbar the way i would like it to be.
I am struggling as you might see in my code to have everything vertically centered properly in this menu. I have made some average fix by playing with the margin but i can't fix the button.
I am sure there is a simple solution with position:relative to have everything center but i can't find it.
http://codepen.io/anon/pen/yMGEZb
Thanks for your help !

Answer 1

updated codepen
Just add the button inside navbar-right li.no need to modify your css.
example snippet
.navbar-default .navbar-header .navbar-brand {
font-family: 'Catamaran', 'Helvetica', 'Arial', 'sans-serif';
font-weight: 200;
letter-spacing: 1px;
color: #fdcc52;
}
.navbar-default .navbar-header .navbar-brand:hover,
.navbar-default .navbar-header .navbar-brand:focus {
color: #fcbd20;
}
.navbar-default .navbar-header .navbar-toggle {
font-size: 12px;
color: #222222;
padding: 8px 10px;
}
.navbar-default .nav > li > a {
font-family: Montserrat;
font-weight:300;
font-style:normal;
text-transform: uppercase;
letter-spacing: 2px;
font-size: 13px;
color: #121212;
}
/*#media (min-width: 768px)
.button-nav {
display: inline-block;
z-index: 101;
}*/
.button-nav {
position: relative;
bottom: 50%;
background-color: transparent;
font-family: Montserrat;
font-weight: 300;
font-style:normal;
letter-spacing:2px;
font-size: 13px;
color: #121212;
text-transform: uppercase;
border: 1px solid #121212;
padding: 18px 40px;
transition: color .4s cubic-bezier(.694,.0482,.335,1),background-color .4s cubic-bezier(.694,.0482,.335,1),border .4s cubic-bezier(.694,.0482,.335,1);
cursor:pointer;
text-align:center;
text-rendering: optimizeLegibility;
}
.button-nav:hover {
background-color: #1c1c1c;
font-family: Montserrat;
font-weight: 300;
font-style:normal;
letter-spacing:2px;
font-size: 13px;
color: white;
text-transform: uppercase;
border: 1px solid #1c1c1c;
padding: 18px 40px;
transition: color .4s cubic-bezier(.694,.0482,.335,1),background-color .4s cubic-bezier(.694,.0482,.335,1),border .4s cubic-bezier(.694,.0482,.335,1);
cursor:pointer;
text-align:center;
text-rendering: optimizeLegibility;
}
.navbar-default .nav > li > a,
.navbar-default .nav > li > a:focus {
color: #121212;
}
.navbar-default .nav > li > a:hover,
.navbar-default .nav > li > a:focus:hover {
color: #fdcc52;
}
.navbar-default .nav > li.active > a,
.navbar-default .nav > li.active > a:focus {
color: #fdcc52 !important;
background-color: transparent;
}
.navbar-default .nav > li.active > a:hover,
.navbar-default .nav > li.active > a:focus:hover {
background-color: transparent;
}
#media (min-width: 768px) {
.navbar-default {
background-color: transparent;
border-color: transparent;
}
.navbar-default .navbar-header .navbar-brand {
color: rgba(34, 34, 34, 0.1);
}
.navbar-default .navbar-header .navbar-brand:hover,
.navbar-default .navbar-header .navbar-brand:focus {
color: white;
}
.navbar-default .nav > li > a,
.navbar-default .nav > li > a:focus {
color: #121212;
}
.navbar-default .nav > li > a:hover,
.navbar-default .nav > li > a:focus:hover {
color: white;
}
.navbar-default.affix {
background-color: white;
border-color: rgba(34, 34, 34, 0.1);
}
.navbar-default.affix .navbar-header .navbar-brand {
color: #222222;
}
.navbar-default.affix .navbar-header .navbar-brand:hover,
.navbar-default.affix .navbar-header .navbar-brand:focus {
color: #fdcc52;
}
.navbar-default.affix .nav > li > a,
.navbar-default.affix .nav > li > a:focus {
color: #222222;
}
.navbar-default.affix .nav > li > a:hover,
.navbar-default.affix .nav > li > a:focus:hover {
color: #fdcc52;
}
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<nav id="mainNav" class="navbar navbar-default navbar-fixed-top">
<div class="container" style="height:80px;">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span> Menu <i class="fa fa-bars"></i>
</button>
<a class="navbar-brand page-scroll" href="#page-top">
<img src="http://svgshare.com/i/17J.svg" width="220" height="50" alt="">
</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right" style="margin-top:20px;">
<li>
<a class="page-scroll" href="#download">Download</a>
</li>
<li>
<a class="page-scroll" href="#features">Features</a>
</li>
<li>
<a class="page-scroll" href="#contact">Contact</a>
</li>
<li><button class="button-nav pull-right">Get started</button></li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>