Vertical align middle for responsive top navigation without fixed height [duplicate] - html

Question

This question already has answers here:
How can I vertically align elements in a div?
(28 answers)
Flexbox: center horizontally and vertically
(14 answers)
How can I center an absolutely positioned element in a div?
(37 answers)
Closed 3 years ago.
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">
LOREM <b>IPSUM</b>
<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> <b>Lorem</b></li>
<li><b>Ipsum</b></li>
<li><b>Dolor</b></li>
<li><b>Sit</b></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!

Answer 1

You can use css transform transform: translateY(10%); check snippet.
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;
transform: translateY(19%);
}
/* 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;
transform: translateY(10%);
}
.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 (max-width: 920px) {
.header .menu {
transform: translateY(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">
LOREM <b>IPSUM</b>
<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>
<b>Lorem</b>
</li>
<li><b>Ipsum</b></li>
<li><b>Dolor</b></li>
<li><b>Sit</b></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>

Answer 2

Try using the below CSS :
.header ul {
margin: 0;
padding: 0;
list-style: none;
overflow: hidden;
margin-top: 1%;
}

Answer 3

Try this CSS
.header {
position: relative;
display: flex;
align-items: center;
width: 100%;
justify-content: space-between;
}
#media only screen and (max-width: 600px) {
.header {
display: block;
}
}