I want to center the text in my top navigation below vertically. I tried to give my .header a height:3em; and use vertical-align:middle; but then my responsive fold-out menu can't handle the fixed height. The menu doesnt appear anymore because the height is fixed now. I also tried with .parent padding:50% 0; and .child margin:0 auto; but I don't get the trick. I also tried to use line-height:40px and it looks ok - but my burger-menu-icon won't center this way. My burger-menu-icon also has problems when using % and translate, i can center it this way - but with fold-out menu it's also moving to the 50% and that's not wanted. Changing to fixed/absolute will crash the % and translate...
html {
font-size: calc(1.3em + 1vw)
}
body {
margin: 0;
font-family: Helvetica, sans-serif;
background-color: #fafafa;
}
/* header */
.header {
position: fixed;
overflow: auto;
width: 100%;
max-width: 30em;
margin-left: auto;
margin-right: auto;
box-shadow: 0 1px 3px rgba(0, 0, 0, .12), 0 1px 2px rgba(0, 0, 0, .24);
background: #ffb347; /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #ffb347, #ffcc33); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #ffb347, #ffcc33); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
.header ul {
margin: 0;
padding: 0;
list-style: none;
overflow: hidden;
}
.header li a {
display: block;
padding: 15px 20px;
text-decoration: none;
font-size: 0.7em;
color: #000;
background-color: blue;
}
.header li a:hover,
.header .menu-btn:hover {
background-color: blue;
}
.header .logo {
display: block;
float: left;
font-size: 1.3em;
padding: 15px 20px;
text-decoration: none;
color: #000;
background-color: blue;
}
.header .logo:hover {
}
/* menu */
.header .menu {
clear: both;
max-height: 0;
transition: max-height .2s ease-out;
}
/* menu icon */
.header .menu-icon {
cursor: pointer;
display: inline-block;
float: right;
display:table-cell;
vertical-align:middle;
text-align:center;
padding: 0.9em 0.4em;
user-select: none;
background: blue;
}
.header .menu-icon .navicon {
background: #333;
display: block;
height: 7px;
position: relative;
transition: background .2s ease-out;
width: 40px;
}
.header .menu-icon .navicon:before,
.header .menu-icon .navicon:after {
background: #333;
content: '';
display: block;
height: 100%;
position: absolute;
transition: all .2s ease-out;
width: 100%;
}
.header .menu-icon .navicon:before {
top: 15px;
}
.header .menu-icon .navicon:after {
top: -15px;
}
/* menu btn */
.header .menu-btn {
display: none;
}
.header .menu-btn:checked ~ .menu {
max-height: 100%;
}
.header .menu-btn:checked ~ .menu-icon .navicon {
background: transparent;
}
.header .menu-btn:checked ~ .menu-icon .navicon:before {
transform: rotate(-45deg);
}
.header .menu-btn:checked ~ .menu-icon .navicon:after {
transform: rotate(45deg);
}
.header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before,
.header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after {
top: 0;
}
@media (min-width: 920px) {
.header {
position: relative;
}
.header li {
float: left;
}
.header li a {
}
.header .menu {
clear: none;
float: right;
max-height: none;
}
.header .menu-icon {
display: none;
}
}
<div class="header">
<a href="" class="logo">LOREM <b>IPSUM</b></a>
<input class="menu-btn" type="checkbox" id="menu-btn" />
<label class="menu-icon" for="menu-btn"><span class="navicon"></span></label>
<ul class="menu">
<li><a href="#work"> <b>Lorem</b></a></li>
<li><a href="#about"><b>Ipsum</b></a></li>
<li><a href="#careers"><b>Dolor</b></a></li>
<li><a href="#contact"><b>Sit</b></a></li>
</ul>
</div>
<br><br><br>
<br><br><br>
<br><br><br>
<br><br><br>
<br><br><br>
<br><br><br>
<br><br><br>
<br><br><br>
<br><br><br>
<br><br><br>
Start it in Full-Page!