Issue getting different elements in nav bar to align vertically - html

Question

I made several changes to a navigation bar that I had. Since the changes, I cannot get the red "Request Quote" button to vertically align in the middle to line up with the other items in the nav.
What I changed was wrapping the link around the list item so that the whole space would be clickable for the mobile version. Previously, the html was like:
<li>LEARN</li>
and I would use #nav-list li a to call the elements because I didn't assign a class at that point.
Does anyone see what I am doing wrong? I do not want to use position: absolute if possible.
nav {
background: #FFF;
height: 70px;
width: 100%;
max-width: 100%;
box-shadow: 0px 6px 15px -4px rgba(0,0,0,0.12);
position: fixed;
top: 0;
z-index: 999;
box-sizing: border-box;
}
#nav-pop {
float: right;
display: block;
margin-right: 5%;
margin-top: 25px;
transition: ease 0.5s;-webkit-transition: ease 0.5s;
}
#nav-pop.active {
opacity: 1;
background: rgba(0,0,0,0.8);
background: #2f2f2f;
right: 0;
margin-top: 0;
margin-right: 0;
z-index: 999999;
transition: ease 0.6s;-webkit-transition: ease 0.6s;
transform: translateX(0);-webkit-transform: translateX(0);
box-shadow: -9px 0px 9px 1px rgba(0,0,0,.2);
}
.navItem {
display: inline-block;
margin: 0 17px;
vertical-align: top;
}
.navItem:first-child {
margin-left: 0px;
}
.navItem:last-child {
margin-right: 0px;
}
.navItem, #serviceClick {
text-decoration: none;
font-family: 'Muli', sans-serif;
font-size: .9rem;
color: #747678;
letter-spacing: 1px;
vertical-align: top;
transition: all .3s;-webkit-transition: all .3s;
cursor: pointer;
}
.navItem:after, #serviceClick:after {
content: '';
display: block;
width: 0;
margin-top: 6px;
background: #b82222;
height: 2px;
transition: width .3s;
}
.navItem:hover, #serviceClick:hover {
color: #4b4b4b;
transition: all .3s;-webkit-transition: all .3s;
}
.navItem:hover:after, #serviceClick:hover:after {
width: 100%;
transition: width .3s;
}
.navInverse {
padding: 10px 12px;
border-radius: 2px;
box-sizing: border-box;
font-family: 'Muli', sans-serif;
font-size: 1.2rem;
color: #FFF;
border: 1px solid #b82222;
background: linear-gradient(to right bottom, #b82222, #a51e1e);
text-transform: uppercase;
text-decoration: none;
cursor: pointer;
}
.navInverse:hover {
background: #b82222;
background: #FFF;
color: #b82222;
}
.navInverse:after {
content: '';
display: none;
width: 0px;
height: 0px;
transition: none;
}
<nav>
<div id="nav-pop">
<ul id="nav-list">
<li>ABOUT</li>
<li id="serviceClick" class="navItem">SOLUTIONS</li>
<li>LEARN</li>
<li>CONTACT</li>
<li>REQUEST QUOTE</li>
</ul>
</div>
</nav>

Answer 1

A revised answer of my previous explantaion, just remove the margin-top in nav-pop and the add:
#nav-list {
display: flex;
align-items: center;
}
See snippet for finished output:
nav {
background: #FFF;
height: 70px;
width: 100%;
max-width: 100%;
box-shadow: 0px 6px 15px -4px rgba(0,0,0,0.12);
position: fixed;
top: 0;
z-index: 999;
box-sizing: border-box;
}
#nav-list {
display: flex;
align-items: center;
}
#nav-pop {
float: right;
display: block;
margin-right: 5%;
margin-top: 15px;
transition: ease 0.5s;-webkit-transition: ease 0.5s;
}
#nav-pop.active {
opacity: 1;
background: rgba(0,0,0,0.8);
background: #2f2f2f;
right: 0;
margin-top: 0;
margin-right: 0;
z-index: 999999;
transition: ease 0.6s;-webkit-transition: ease 0.6s;
transform: translateX(0);-webkit-transform: translateX(0);
box-shadow: -9px 0px 9px 1px rgba(0,0,0,.2);
}
.navItem {
display: inline-block;
margin: 0 17px;
vertical-align: top;
}
.navItem:first-child {
margin-left: 0px;
}
.navItem:last-child {
margin-right: 0px;
}
.navItem, #serviceClick {
text-decoration: none;
font-family: 'Muli', sans-serif;
font-size: .9rem;
color: #747678;
letter-spacing: 1px;
vertical-align: top;
transition: all .3s;-webkit-transition: all .3s;
cursor: pointer;
}
.navItem:after, #serviceClick:after {
content: '';
display: block;
width: 0;
margin-top: 6px;
background: #b82222;
height: 2px;
transition: width .3s;
}
.navItem:hover, #serviceClick:hover {
color: #4b4b4b;
transition: all .3s;-webkit-transition: all .3s;
}
.navItem:hover:after, #serviceClick:hover:after {
width: 100%;
transition: width .3s;
}
.navInverse {
padding: 10px 12px;
border-radius: 2px;
box-sizing: border-box;
font-family: 'Muli', sans-serif;
font-size: 1.2rem;
color: #FFF;
border: 1px solid #b82222;
background: linear-gradient(to right bottom, #b82222, #a51e1e);
text-transform: uppercase;
text-decoration: none;
cursor: pointer;
}
.navInverse:hover {
background: #b82222;
background: #FFF;
color: #b82222;
}
.navInverse:after {
content: '';
display: none;
width: 0px;
height: 0px;
transition: none;
}
<nav>
<div id="nav-pop">
<ul id="nav-list">
<li>ABOUT</li>
<li id="serviceClick" class="navItem">SOLUTIONS</li>
<li>LEARN</li>
<li>CONTACT</li>
<li>REQUEST QUOTE</li>
</ul>
</div>
</nav>

Answer 2

Firstly, Keep li as child of ul not anchor.
Removed the top margin on nav-pop.
Added display: flex and align-items: center on nav-list.
Reduced the after element's margin to zero.
nav {
background: #FFF;
height: 70px;
width: 100%;
max-width: 100%;
box-shadow: 0px 6px 15px -4px rgba(0, 0, 0, 0.12);
position: fixed;
top: 0;
z-index: 999;
box-sizing: border-box;
}
#nav-pop {
float: right;
display: block;
margin-right: 5%;
transition: ease 0.5s;
-webkit-transition: ease 0.5s;
}
#nav-pop.active {
opacity: 1;
background: rgba(0, 0, 0, 0.8);
background: #2f2f2f;
right: 0;
margin-top: 0;
margin-right: 0;
z-index: 999999;
transition: ease 0.6s;
-webkit-transition: ease 0.6s;
transform: translateX(0);
-webkit-transform: translateX(0);
box-shadow: -9px 0px 9px 1px rgba(0, 0, 0, .2);
}
.navItem {
display: inline-block;
margin: 0 17px;
vertical-align: top;
}
.navItem:first-child {
margin-left: 0px;
}
.navItem:last-child {
margin-right: 0px;
}
.navItem,
#serviceClick {
text-decoration: none;
font-family: 'Muli', sans-serif;
font-size: .9rem;
color: #747678;
letter-spacing: 1px;
vertical-align: top;
transition: all .3s;
-webkit-transition: all .3s;
cursor: pointer;
}
.navItem:after,
#serviceClick:after {
content: '';
display: block;
width: 0;
margin-top: 0px;
background: #b82222;
height: 2px;
transition: width .3s;
}
.navItem:hover,
#serviceClick:hover {
color: #4b4b4b;
transition: all .3s;
-webkit-transition: all .3s;
}
.navItem:hover:after,
#serviceClick:hover:after {
width: 100%;
transition: width .3s;
}
.navInverse {
padding: 10px 12px;
border-radius: 2px;
box-sizing: border-box;
font-family: 'Muli', sans-serif;
font-size: 1.2rem;
color: #FFF;
border: 1px solid #b82222;
background: linear-gradient(to right bottom, #b82222, #a51e1e);
text-transform: uppercase;
text-decoration: none;
cursor: pointer;
}
.navInverse:hover {
background: #b82222;
background: #FFF;
color: #b82222;
}
.navInverse:after {
content: '';
display: none;
width: 0px;
height: 0px;
transition: none;
}
#nav-list {
display: flex;
align-items: center;
}
.navItem a {
padding: 24px 12px;
}
<nav>
<div id="nav-pop">
<ul id="nav-list">
<li href="" class="navItem"><a>ABOUT</a></li>
<li id="serviceClick" class="navItem">SOLUTIONS</li>
<li href="" class="navItem"><a>LEARN</a></li>
<li href="" class="navItem"><a>CONTACT</a></li>
<li href="" class="navInverse navItem" id="quoteButton"><a>REQUEST QUOTE</a></li>
</ul>
</div>
</nav>

Answer 3

To get a full alignment on your navbar I removed the margin-top from the #nav-pop id it wasn't necessary. Then changed the nav-list id (because it's the container) by adding the following:
#nav-list {
display: flex;
align-items: center;
}
Giving me the desired display you're after:

Answer 4

The first issue I notice is that your ul #nav-list has a margin-top that may be affecting your alignment, but the most important issue is that the height of #quoteButton does not match the line-height of the rest of your links (because there is none set). This will cause vertical-align: middle to not work correctly as the elements are not the same heights.
When I set the line-height of each <li> to 44px they align perfectly. To me, the answer suggested by #billy.farroll is not sufficient as the button text does not align with the <li>s.