I have a website that needs a pixel based navbar - in this case height: 80px.
The problem is, I can't center the ul and li elements vertically.
I've tried using: top:50%; transform: translate(0,-50%), as shown in my jsfiddle, and also flex positioning, but none have worked.
Jsfiddle: https://jsfiddle.net/agreyfield91/w3s8cj92/
header {
height: 80px;
position: fixed;
top: 0;
transition: top 0.2s ease-in-out;
width: 100%;
}
footer {
background: #ddd;
}
* {
color: transparent
}
nav {
height: 100%;
width: 100%;
background-color: bisque;
}
nav ul {
list-style: none;
text-align: center;
margin: 0;
padding: 0;
top: 50%;
transform: translate(0, -50%);
}
nav ul li {
display: inline-block;
float: left;
}
nav ul li a {
display: block;
padding: 15px;
text-decoration: none;
color: #aaa;
font-weight: 800;
text-transform: uppercase;
margin: 0 10px;
}<header class="nav-down">
<nav class="headernav">
<ul>
<li><a href="#">Gig</a></li>
<li><a href="#">ity</a></li>
<li><a href="#">element</a></li>
</ul>
</nav>
</header>