Get fixed position element to not block other content - css

Question

Say I am creating a navigation bar using the header element:
header {
border: 1px solid #a2a2a2;
width: 100vw;
height: 150px;
position: fixed;
top: 0;
z-index: 1;
}
Now when the user scrolls down, the navigation bar obviously covers 150px of content. Is there a way to tell all the elements below this fixed navigation bar to "clear" it or something like that? So that the navigation bar remains fixed but does not cover content?
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
ul {
margin: 0;
padding: 0;
list-style: none;
}
h2,
h3,
a {
color: #34495e;
}
a {
text-decoration: none;
}
.logo {
margin: 0;
font-size: 1.45em;
}
.main-nav {
margin-top: 5px;
}
.logo a,
.main-nav a {
padding: 10px 15px;
text-transform: uppercase;
text-align: center;
display: block;
}
.main-nav a {
color: #34495e;
font-size: .99em;
}
.main-nav a:hover {
color: #718daa;
}
.header {
height: 150px;
padding-top: .5em;
padding-bottom: .5em;
border: 1px solid #a2a2a2;
background-color: #f4f4f4;
-webkit-box-shadow: 0px 0px 14px 0px rgba(0, 0, 0, 0.75);
-moz-box-shadow: 0px 0px 14px 0px rgba(0, 0, 0, 0.75);
box-shadow: 0px 0px 14px 0px rgba(0, 0, 0, 0.75);
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
width: 100vw;
position: fixed;
top: 0;
z-index: 1;
}
/* =================================
Media Queries
==================================== */
#media (min-width: 769px) {
.header,
.main-nav {
display: flex;
}
.header {
flex-direction: column;
align-items: center;
.header {
width: 80%;
margin: 0 auto;
max-width: 1150px;
}
}
}
#media (min-width: 1025px) {
.header {
flex-direction: row;
justify-content: space-between;
}
}
.parallex {
background: url("https://scontent-lga3-1.xx.fbcdn.net/v/t31.0-8/277233_456825154330649_1101536084_o.jpg?_nc_cat=106&_nc_ht=scontent-lga3-1.xx&oh=a23cf28b01ae96e2585b36164a747906&oe=5D567AAB") no-repeat center bottom /cover;
background-attachment: fixed;
height: 100vh;
}
.text-in-parallex {
position: relative;
top: 70vh;
left: 28vw;
color: white;
font-size: 45px;
}
body {
background-color: #EEEEEE;
/* #EE2324 */
}
.menu-grid {
display: grid;
grid-template-columns: 1fr 3fr;
width: 80%;
margin: 20px auto 100px auto;
padding-bottom: 100px;
border: 1px solid lightgray;
background-color: white;
border-radius: 3px;
/* Shadow */
-moz-box-shadow: 0px 3px 30px 1px #ccc;
-webkit-box-shadow: 0px 3px 30px 1px #ccc;
box-shadow: 10px 15px 30px 15px #ccc;
font-family: 'Alice', serif;
}
.table-of-contents {
padding: 20px;
position: sticky;
top: 0;
height: 100vh;
}
.table-of-contents>h2 {
text-align: center;
margin-bottom: 10px;
}
.inner-menu-grid {
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 20px;
background-color: white;
padding: 20px 20px 25px 20px;
border-radius: 3px;
}
.menu-item {
display: flex;
justify-content: space-between;
}
.price {
font-size: 20px;
}
.menu-section {
font-family: "Open Sans", Arial, sans-serif;
font-size: 20.9368px;
font-weight: 400;
margin-bottom: 10px;
}
.menu-section>a {
text-decoration: none;
color: #999999;
padding-left: 7px;
}
.menu-section>a:hover {
border-left: 1px solid blue;
color: #1f5ea9;
text-decoration: underline;
}
.name-of-food {
font-size: 20px;
}
.food-description {
color: grey;
font-style: italic;
}
.food-section {
grid-column: 1 / 3;
text-align: center;
padding-top: 20px;
font-size: 2em;
}
.food-section:nth-child(1) {
padding-top: 0;
}
.restaurant-info {
grid-column: 1 / 3;
text-align: center;
border: 1px solid lightgray;
padding: 20px 0px;
}
#search-form {
border-radius: 3px;
text-align: center;
margin-bottom: 10px;
}
#search-input {
width: 80%;
}
.fab {
padding: 10px;
font-size: 30px;
text-align: center;
text-decoration: none;
margin: 5px 2px;
border-radius: 3px;
}
.fab:hover {
opacity: 0.7;
cursor: pointer;
}
.fa-facebook-square {
background: #3B5998;
color: white;
}
<header class="header">
<h1 class="logo">Flexbox</h1>
<ul class="main-nav">
<li>Menu</li>
<li>Contact</li>
</ul>
</header>
<div class="menu-grid">
<div class="restaurant-info">
<h1>Example Pizzeria</h1>
</div>
<div class="table-of-contents">
<h2>Menu</h2>
<form id="search-form">
<input id="search-input" type="search" placeholder="Or search for an item..." />
</form>
<h3 class="menu-section"><a id="appetizers-link" href="#appetizers">Appetizers</a></h3>
<h3 class="menu-section"><a id="rolls-calzones-link" href="#rolls-calzones">Rolls & Calzones</a></h3>
<h3 class="menu-section"><a id="pizza-link" href="#pizza">Pizza</a></h3>
<h3 class="menu-section"><a id="salads-link" href="#salads">Salads</a></h3>
<h3 class="menu-section"><a id="pasta-link" href="#pasta">Pasta</a></h3>
<h3 class="menu-section"><a id="sandwiches-link" href="#sandwiches">Sandwiches</a></h3>
</div>
<div class="inner-menu-grid">
<h2 id="appetizers" class="food-section">Appetizers</h2>
<div class="menu-item">
<div class="food-item">
<span class="name-of-food">Zucchini Sticks</span>
<p class="food-description">Served with marinara sauce</p>
</div>
<div class="price">
$6.95
</div>
</div>
<div class="menu-item">
<div class="food-item">
<span class="name-of-food">Stuffed Mushrooms</span>
</div>
<div class="price">
$6.95
</div>
</div>
<div class="menu-item">
<div class="food-item">
<span class="name-of-food"> Mozzarella Sticks (5)</span>
<p class="food-description">Served with marinara sauce</p>
</div>
<div class="price">
$7.50
</div>
</div>
<div class="menu-item">
<div class="food-item">
<span class="name-of-food">Baked Clams</span>
</div>
<div class="price">
$8.96
</div>
</div>
<div class="menu-item">
<div class="food-item">
<span class="name-of-food">Mozarella Caprese</span>
<p class="food-description">Fresh mozzarella, tomatores, basil, olive oil & balsamic vinegar</p>
</div>
<div class="price">
$7.50
</div>
</div>
<div class="menu-item">
<div class="food-item">
<span class="name-of-food">Mozzarella Sticks (5)</span>
</div>
<div class="price">
$7.50
</div>
</div>
<h2 id="rolls-calzones" class="food-section">Rolls and Calzones</h2>
<div class="menu-item">
<div class="food-item">
<span class="name-of-food">Chicken Roll</span>
</div>
<div class="price">
$6.95
</div>
</div>
<div class="menu-item">
<div class="food-item">
<span class="name-of-food">Buffalo Chcicken Roll</span>
</div>
<div class="price">
$6.95
</div>
</div>
<div class="menu-item">
<div class="food-item">
<span class="name-of-food">Spinahc Roll</span>
</div>
<div class="price">
$6.95
</div>
</div>
<div class="menu-item">
<div class="food-item">
<span class="name-of-food">Sausage Roll</span>
</div>
<div class="price">
$6.95
</div>
</div>
<div class="menu-item">
<div class="food-item">
<span class="name-of-food">Chicken and Broccoli Roll</span>
</div>
<div class="price">
$6.95
</div>
</div>
<h2 id="pizza" class="food-section">Pizza</h2>
<div class="menu-item">
<div class="food-item">
<span class="name-of-food">Zucchini Sticks</span>
<p class="food-description">Served with marinara sauce</p>
</div>
<div class="price">
$6.95
</div>
</div>
<div class="menu-item">
<div class="food-item">
<span class="name-of-food">Stuffed Mushrooms</span>
</div>
<div class="price">
$6.95
</div>
</div>
<div class="menu-item">
<div class="food-item">
<span class="name-of-food"> Mozzarella Sticks (5)</span>
<p class="food-description">Served with marinara sauce</p>
</div>
<div class="price">
$7.50
</div>
</div>
<div class="menu-item">
<div class="food-item">
<span class="name-of-food">Baked Clams</span>
</div>
<div class="price">
$8.96
</div>
</div>
<div class="menu-item">
<div class="food-item">
<span class="name-of-food">Mozarella Caprese</span>
<p class="food-description">Fresh mozzarella, tomatores, basil, olive oil & balsamic vinegar</p>
</div>
<div class="price">
$7.50
</div>
</div>
<div class="menu-item">
<div class="food-item">
<span class="name-of-food">Mozzarella Sticks (5)</span>
</div>
<div class="price">
$7.50
</div>
</div>
<h2 id="salads" class="food-section">Salads</h2>
<div class="menu-item">
<div class="food-item">
<span class="name-of-food">Chicken Roll</span>
</div>
<div class="price">
$6.95
</div>
</div>
<div class="menu-item">
<div class="food-item">
<span class="name-of-food">Buffalo Chcicken Roll</span>
</div>
<div class="price">
$6.95
</div>
</div>
<div class="menu-item">
<div class="food-item">
<span class="name-of-food">Spinahc Roll</span>
</div>
<div class="price">
$6.95
</div>
</div>
<div class="menu-item">
<div class="food-item">
<span class="name-of-food">Sausage Roll</span>
</div>
<div class="price">
$6.95
</div>
</div>
<div class="menu-item">
<div class="food-item">
<span class="name-of-food">Chicken and Broccoli Roll</span>
</div>
<div class="price">
$6.95
</div>
</div>
<h2 id="pasta" class="food-section">Pasta</h2>
<div class="menu-item">
<div class="food-item">
<span class="name-of-food">Pasta item</span>
</div>
<div class="price">
$6.95
</div>
</div>
<div class="menu-item">
<div class="food-item">
<span class="name-of-food">Buffalo Chcicken Roll</span>
</div>
<div class="price">
$6.95
</div>
</div>
<div class="menu-item">
<div class="food-item">
<span class="name-of-food">Spinahc Roll</span>
</div>
<div class="price">
$6.95
</div>
</div>
<div class="menu-item">
<div class="food-item">
<span class="name-of-food">Sausage Roll</span>
</div>
<div class="price">
$6.95
</div>
</div>
<div class="menu-item">
<div class="food-item">
<span class="name-of-food">Chicken and Broccoli Roll</span>
</div>
<div class="price">
$6.95
</div>
</div>
<h2 id="sandwiches" class="food-section">Sandwiches</h2>
<div class="menu-item">
<div class="food-item">
<span class="name-of-food">Chicken Roll</span>
</div>
<div class="price">
$6.95
</div>
</div>
<div class="menu-item">
<div class="food-item">
<span class="name-of-food">Buffalo Chcicken Roll</span>
</div>
<div class="price">
$6.95
</div>
</div>
<div class="menu-item">
<div class="food-item">
<span class="name-of-food">Spinahc Roll</span>
</div>
<div class="price">
$6.95
</div>
</div>
<div class="menu-item">
<div class="food-item">
<span class="name-of-food">Sausage Roll</span>
</div>
<div class="price">
$6.95
</div>
</div>
<div class="menu-item">
<div class="food-item">
<span class="name-of-food">Chicken and Broccoli Roll</span>
</div>
<div class="price">
$6.95
</div>
</div>
</div>
<!--close .inner-menu-grid-->
</div>
<!--close .menu-grid-->
View on JSFiddle

Answer 1

Create a grid with two rows, put the navigation bar in the top row, and put your content in your second row, and make sure that the first row starts at the top and finishes 150px from the top.

Answer 2

You might find position:sticky helpful.
It seems you are already using it for the "Table of Contents" section.
A stickily positioned element is an element whose computed position value is sticky. It's treated as relatively positioned until its containing block crosses a specified threshold (such as setting top to value other than auto) within its flow root (or the container it scrolls within), at which point it is treated as "stuck" until meeting the opposite edge of its containing block. -- position.
Also note browser compatibility for position:sticky.
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
ul {
margin: 0;
padding: 0;
list-style: none;
}
h2,
h3,
a {
color: #34495e;
}
a {
text-decoration: none;
}
.logo {
margin: 0;
font-size: 1.45em;
}
.main-nav {
margin-top: 5px;
}
.logo a,
.main-nav a {
padding: 10px 15px;
text-transform: uppercase;
text-align: center;
display: block;
}
.main-nav a {
color: #34495e;
font-size: .99em;
}
.main-nav a:hover {
color: #718daa;
}
.header {
height: 150px;
padding-top: .5em;
padding-bottom: .5em;
border: 1px solid #a2a2a2;
background-color: #f4f4f4;
-webkit-box-shadow: 0px 0px 14px 0px rgba(0, 0, 0, 0.75);
-moz-box-shadow: 0px 0px 14px 0px rgba(0, 0, 0, 0.75);
box-shadow: 0px 0px 14px 0px rgba(0, 0, 0, 0.75);
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
width: 100vw;
position: sticky;
top: 0;
z-index: 1;
}
/* =================================
Media Queries
==================================== */
#media (min-width: 769px) {
.header,
.main-nav {
display: flex;
}
.header {
flex-direction: column;
align-items: center;
.header {
width: 80%;
margin: 0 auto;
max-width: 1150px;
}
}
}
#media (min-width: 1025px) {
.header {
flex-direction: row;
justify-content: space-between;
}
}
.parallex {
background: url("https://scontent-lga3-1.xx.fbcdn.net/v/t31.0-8/277233_456825154330649_1101536084_o.jpg?_nc_cat=106&_nc_ht=scontent-lga3-1.xx&oh=a23cf28b01ae96e2585b36164a747906&oe=5D567AAB") no-repeat center bottom /cover;
background-attachment: fixed;
height: 100vh;
}
.text-in-parallex {
position: relative;
top: 70vh;
left: 28vw;
color: white;
font-size: 45px;
}
body {
background-color: #EEEEEE;
/* #EE2324 */
}
.menu-grid {
display: grid;
grid-template-columns: 1fr 3fr;
width: 80%;
margin: 20px auto 100px auto;
padding-bottom: 100px;
border: 1px solid lightgray;
background-color: white;
border-radius: 3px;
/* Shadow */
-moz-box-shadow: 0px 3px 30px 1px #ccc;
-webkit-box-shadow: 0px 3px 30px 1px #ccc;
box-shadow: 10px 15px 30px 15px #ccc;
font-family: 'Alice', serif;
}
.table-of-contents {
padding: 20px;
position: sticky;
top: 0;
height: 100vh;
}
.table-of-contents>h2 {
text-align: center;
margin-bottom: 10px;
}
.inner-menu-grid {
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 20px;
background-color: white;
padding: 20px 20px 25px 20px;
border-radius: 3px;
}
.menu-item {
display: flex;
justify-content: space-between;
}
.price {
font-size: 20px;
}
.menu-section {
font-family: "Open Sans", Arial, sans-serif;
font-size: 20.9368px;
font-weight: 400;
margin-bottom: 10px;
}
.menu-section>a {
text-decoration: none;
color: #999999;
padding-left: 7px;
}
.menu-section>a:hover {
border-left: 1px solid blue;
color: #1f5ea9;
text-decoration: underline;
}
.name-of-food {
font-size: 20px;
}
.food-description {
color: grey;
font-style: italic;
}
.food-section {
grid-column: 1 / 3;
text-align: center;
padding-top: 20px;
font-size: 2em;
}
.food-section:nth-child(1) {
padding-top: 0;
}
.restaurant-info {
grid-column: 1 / 3;
text-align: center;
border: 1px solid lightgray;
padding: 20px 0px;
}
#search-form {
border-radius: 3px;
text-align: center;
margin-bottom: 10px;
}
#search-input {
width: 80%;
}
.fab {
padding: 10px;
font-size: 30px;
text-align: center;
text-decoration: none;
margin: 5px 2px;
border-radius: 3px;
}
.fab:hover {
opacity: 0.7;
cursor: pointer;
}
.fa-facebook-square {
background: #3B5998;
color: white;
}
<header class="header">
<h1 class="logo">Flexbox</h1>
<ul class="main-nav">
<li>Menu</li>
<li>Contact</li>
</ul>
</header>
<div class="menu-grid">
<div class="restaurant-info">
<h1>Example Pizzeria</h1>
</div>
<div class="table-of-contents">
<h2>Menu</h2>
<form id="search-form">
<input id="search-input" type="search" placeholder="Or search for an item..." />
</form>
<h3 class="menu-section"><a id="appetizers-link" href="#appetizers">Appetizers</a></h3>
<h3 class="menu-section"><a id="rolls-calzones-link" href="#rolls-calzones">Rolls & Calzones</a></h3>
<h3 class="menu-section"><a id="pizza-link" href="#pizza">Pizza</a></h3>
<h3 class="menu-section"><a id="salads-link" href="#salads">Salads</a></h3>
<h3 class="menu-section"><a id="pasta-link" href="#pasta">Pasta</a></h3>
<h3 class="menu-section"><a id="sandwiches-link" href="#sandwiches">Sandwiches</a></h3>
</div>
<div class="inner-menu-grid">
<h2 id="appetizers" class="food-section">Appetizers</h2>
<div class="menu-item">
<div class="food-item">
<span class="name-of-food">Zucchini Sticks</span>
<p class="food-description">Served with marinara sauce</p>
</div>
<div class="price">
$6.95
</div>
</div>
<div class="menu-item">
<div class="food-item">
<span class="name-of-food">Stuffed Mushrooms</span>
</div>
<div class="price">
$6.95
</div>
</div>
<div class="menu-item">
<div class="food-item">
<span class="name-of-food"> Mozzarella Sticks (5)</span>
<p class="food-description">Served with marinara sauce</p>
</div>
<div class="price">
$7.50
</div>
</div>
<div class="menu-item">
<div class="food-item">
<span class="name-of-food">Baked Clams</span>
</div>
<div class="price">
$8.96
</div>
</div>
<div class="menu-item">
<div class="food-item">
<span class="name-of-food">Mozarella Caprese</span>
<p class="food-description">Fresh mozzarella, tomatores, basil, olive oil & balsamic vinegar</p>
</div>
<div class="price">
$7.50
</div>
</div>
<div class="menu-item">
<div class="food-item">
<span class="name-of-food">Mozzarella Sticks (5)</span>
</div>
<div class="price">
$7.50
</div>
</div>
<h2 id="rolls-calzones" class="food-section">Rolls and Calzones</h2>
<div class="menu-item">
<div class="food-item">
<span class="name-of-food">Chicken Roll</span>
</div>
<div class="price">
$6.95
</div>
</div>
<div class="menu-item">
<div class="food-item">
<span class="name-of-food">Buffalo Chcicken Roll</span>
</div>
<div class="price">
$6.95
</div>
</div>
<div class="menu-item">
<div class="food-item">
<span class="name-of-food">Spinahc Roll</span>
</div>
<div class="price">
$6.95
</div>
</div>
<div class="menu-item">
<div class="food-item">
<span class="name-of-food">Sausage Roll</span>
</div>
<div class="price">
$6.95
</div>
</div>
<div class="menu-item">
<div class="food-item">
<span class="name-of-food">Chicken and Broccoli Roll</span>
</div>
<div class="price">
$6.95
</div>
</div>
<h2 id="pizza" class="food-section">Pizza</h2>
<div class="menu-item">
<div class="food-item">
<span class="name-of-food">Zucchini Sticks</span>
<p class="food-description">Served with marinara sauce</p>
</div>
<div class="price">
$6.95
</div>
</div>
<div class="menu-item">
<div class="food-item">
<span class="name-of-food">Stuffed Mushrooms</span>
</div>
<div class="price">
$6.95
</div>
</div>
<div class="menu-item">
<div class="food-item">
<span class="name-of-food"> Mozzarella Sticks (5)</span>
<p class="food-description">Served with marinara sauce</p>
</div>
<div class="price">
$7.50
</div>
</div>
<div class="menu-item">
<div class="food-item">
<span class="name-of-food">Baked Clams</span>
</div>
<div class="price">
$8.96
</div>
</div>
<div class="menu-item">
<div class="food-item">
<span class="name-of-food">Mozarella Caprese</span>
<p class="food-description">Fresh mozzarella, tomatores, basil, olive oil & balsamic vinegar</p>
</div>
<div class="price">
$7.50
</div>
</div>
<div class="menu-item">
<div class="food-item">
<span class="name-of-food">Mozzarella Sticks (5)</span>
</div>
<div class="price">
$7.50
</div>
</div>
<h2 id="salads" class="food-section">Salads</h2>
<div class="menu-item">
<div class="food-item">
<span class="name-of-food">Chicken Roll</span>
</div>
<div class="price">
$6.95
</div>
</div>
<div class="menu-item">
<div class="food-item">
<span class="name-of-food">Buffalo Chcicken Roll</span>
</div>
<div class="price">
$6.95
</div>
</div>
<div class="menu-item">
<div class="food-item">
<span class="name-of-food">Spinahc Roll</span>
</div>
<div class="price">
$6.95
</div>
</div>
<div class="menu-item">
<div class="food-item">
<span class="name-of-food">Sausage Roll</span>
</div>
<div class="price">
$6.95
</div>
</div>
<div class="menu-item">
<div class="food-item">
<span class="name-of-food">Chicken and Broccoli Roll</span>
</div>
<div class="price">
$6.95
</div>
</div>
<h2 id="pasta" class="food-section">Pasta</h2>
<div class="menu-item">
<div class="food-item">
<span class="name-of-food">Pasta item</span>
</div>
<div class="price">
$6.95
</div>
</div>
<div class="menu-item">
<div class="food-item">
<span class="name-of-food">Buffalo Chcicken Roll</span>
</div>
<div class="price">
$6.95
</div>
</div>
<div class="menu-item">
<div class="food-item">
<span class="name-of-food">Spinahc Roll</span>
</div>
<div class="price">
$6.95
</div>
</div>
<div class="menu-item">
<div class="food-item">
<span class="name-of-food">Sausage Roll</span>
</div>
<div class="price">
$6.95
</div>
</div>
<div class="menu-item">
<div class="food-item">
<span class="name-of-food">Chicken and Broccoli Roll</span>
</div>
<div class="price">
$6.95
</div>
</div>
<h2 id="sandwiches" class="food-section">Sandwiches</h2>
<div class="menu-item">
<div class="food-item">
<span class="name-of-food">Chicken Roll</span>
</div>
<div class="price">
$6.95
</div>
</div>
<div class="menu-item">
<div class="food-item">
<span class="name-of-food">Buffalo Chcicken Roll</span>
</div>
<div class="price">
$6.95
</div>
</div>
<div class="menu-item">
<div class="food-item">
<span class="name-of-food">Spinahc Roll</span>
</div>
<div class="price">
$6.95
</div>
</div>
<div class="menu-item">
<div class="food-item">
<span class="name-of-food">Sausage Roll</span>
</div>
<div class="price">
$6.95
</div>
</div>
<div class="menu-item">
<div class="food-item">
<span class="name-of-food">Chicken and Broccoli Roll</span>
</div>
<div class="price">
$6.95
</div>
</div>
</div>
<!--close .inner-menu-grid-->
</div>
<!--close .menu-grid-->

Answer 3

I'd suggest that if you don't want content to be occluded by the header, position: fixed may not be the best solution. Another approach would be to layout the page so that the header has a fixed height, then the content below takes up the rest of the page height, with overflow set to auto, so that it will scroll but the header won't.
Quick example:
<main>
<header>...</header>
<div class="content">...</div>
</main>
body, html {
height: 100%;
}
main {
display: flex;
flex-direction: column;
height: 100%;
}
header {
height: 200px;
flex: 0 0 auto;
}
.content {
flex: 1;
overflow: auto;
}