To vertically center the text in my top navigation, I attempted to set a height of 3em for my .header and use vertical-align: middle;. However, this caused an issue with my responsive fold-out menu as it could not handle the fixed height, resulting in the menu disappearing. I also experimented with padding: 50% 0; for the parent and margin: 0 auto; for the child, but couldn't achieve the desired result. Another attempt involved using line-height: 40px, which appeared fine except for centering the burger menu icon. The burger menu icon also posed challenges when using percentages and translate. While it centered using this method, it shifted with the fold-out menu to 50%, which was not desired. Switching to a fixed/absolute position caused issues with the percentages 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>Launch it in Full-Page Mode!