Move content under fixed nav bar with RESPONSIVE space filler - html

Question

I'm going to base my question on the question "Moving DOM elements below a fixed navigation bar", since mine is very similar.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
nav {
position: fixed;
width: 100%;
top: 0;
background-color: #faf3dd;
opacity: 0.8;
}
nav:hover {
opacity: 1;
}
nav li {
display: inline-block;
list-style-type: none;
padding: 0.7em;
font-size: 1em;
;
border-bottom: solid 1px;
}
main {
background-color: #98fb98;
min-height: 100vh;
padding: 1em;
}
/*Solution suggested in linked question...*/
header {
height: calc(2.4em + 1px);
/* Why 2.4em? 2.4em = 0.7em x 2 (padding)+ 1em (fontSize) + 1px (borderBottom)*/
}
<header>
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Gallery</li>
<li>Lorem</li>
<li>Ipsum</li>
<li>Contact</li>
</ul>
</nav>
</header>
<main>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam mollis sapien nulla, ac feugiat tellus scelerisque eget. Morbi ac leo vel est interdum vulputate. Fusce malesuada, ex vitae sagittis porta, nisl elit consequat urna, a egestas tortor nunc a libero. Maecenas dapibus faucibus dui, non consequat tellus. Phasellus venenatis dui a ultricies facilisis. Sed accumsan, lectus eu fringilla ullamcorper, sem ante suscipit purus, in rhoncus odio est et sem. Sed sit amet blandit turpis. Nunc non justo hendrerit, malesuada quam id, aliquam risus. Praesent mattis urna mi, vitae pulvinar dui laoreet quis. Pellentesque dapibus, sem id fringilla accumsan, felis ligula blandit nibh, bibendum placerat sapien urna fermentum purus. Suspendisse in finibus massa. Quisque erat libero, posuere sit amet efficitur rhoncus, cursus at tortor. Duis eu lacus tristique, tristique mauris sit amet, sagittis arcu. ultricies vitae. </p>
</main>
That snippet is altered a bit to suit me. I deliberately put many navigation list items to make my point clearer (I hope). The accepted solution in question linked above gives a non-responsive height to the <header>,
which here is acting as the space filler (".nav-box"). So when the viewport is resized (smaller), the list items wrap but the header isn't coded to move with the change - content gets covered by the fixed <nav>.
My Question:
How in just CSS (if possible) can the <header>'s height be set to respond to the <nav>'s change in height when the list items get wrapped?

Answer 1

If you want a really responsive solution, remove the position: fixed from nav and add a position: sticky and top: 0 to your header.
header {
position: sticky;
top: 0;
}
Attention this is IMHO the cleanest solution, but depending on your needs it may not suit you, since position: sticky is not supported in IE (if you care for IE)
Example: https://codepen.io/anon/pen/MzrgEr

Answer 2

You can use media queries if you know when the fixed navigation will have to take 2 lines. Yes, I know it's not a solid solution, but if your navigation size is fixed it can work.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
nav {
position: fixed;
width: 100%;
top: 0;
background-color: #faf3dd;
opacity: 0.8;
}
nav:hover {
opacity: 1;
}
nav li {
display: inline-block;
list-style-type: none;
padding: 0.7em;
font-size: 1em;
;
border-bottom: solid 1px;
}
main {
background-color: #98fb98;
min-height: 100vh;
padding: 1em;
}
/*Solution suggested in linked question...*/
header {
height: calc(2.4em + 1px);
/* Why 2.4em? 2.4em = 0.7em x 2 (padding)+ 1em (fontSize) + 1px (borderBottom)*/
}
#media (max-width: 505px) {
main {
margin-top: 3em;
}
}
<header>
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Gallery</li>
<li>Lorem</li>
<li>Ipsum</li>
<li>Contact</li>
</ul>
</nav>
</header>
<main>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam mollis sapien nulla, ac feugiat tellus scelerisque eget. Morbi ac leo vel est interdum vulputate. Fusce malesuada, ex vitae sagittis porta, nisl elit consequat urna, a egestas tortor nunc
a libero. Maecenas dapibus faucibus dui, non consequat tellus. Phasellus venenatis dui a ultricies facilisis. Sed accumsan, lectus eu fringilla ullamcorper, sem ante suscipit purus, in rhoncus odio est et sem. Sed sit amet blandit turpis. Nunc non
justo hendrerit, malesuada quam id, aliquam risus. Praesent mattis urna mi, vitae pulvinar dui laoreet quis. Pellentesque dapibus, sem id fringilla accumsan, felis ligula blandit nibh, bibendum placerat sapien urna fermentum purus. Suspendisse in
finibus massa. Quisque erat libero, posuere sit amet efficitur rhoncus, cursus at tortor. Duis eu lacus tristique, tristique mauris sit amet, sagittis arcu. ultricies vitae. </p>
</main>