Sticky page header doesn't stick to top of page - html

Question

https://codepen.io/sahandz/pen/BrYGKa
I'm making a website where I want a sidebar, header and search bar to be fixed while the results of the search are scrollable. I'm using React, but the rendered HTML looks like this:
.topdiv {
max-height: 100px;
min-height: 100px;
background-color: #DCDCDC;
margin-top: 0px;
margin-right: 0px;
margin-left: 0px;
position: sticky;
top: 0px;
z-index: 1;
width: 100%;
border-bottom: solid;
overflow-x: hidden;
}
.topdiv h1 {
font-family: "Comic Sans MS";
font-weight: bold;
position: absolute;
top: 5px;
text-align: center;
width: 100%;
}
.container-fluid {
padding: 0px;
width: 100%;
height: 100%;
overflow-x: hidden;
}
#media (max-width: 766px) {
.container-fluid {
height: 1200px;
}
}
.sidebar {
position: fixed;
width: 300px;
top: 100px;
height: 100%;
border-right: solid;
padding: 0px;
}
.noofpeople {
position: relative;
padding-top: 20px;
padding-right: 0px;
padding-bottom: 20px;
padding-left: 50px;
right: 0px;
width: 100%;
}
.noofpeople-wrapper input {
width: 55px;
}
.dinneroverview {
width: 100%;
padding: 0px;
margin: 0px;
}
.dish-overview-header {
border-bottom: solid;
border-top: solid;
height: 25px;
padding-left: 25px;
padding-right: 30px;
margin: 0px;
background-color: #d4d5d8;
}
.dish-name {
float: left;
}
.cost {
float: right;
}
.dinneroverview-price {
color: red;
padding-top: 50px;
padding-bottom: 0px;
padding-right: 30px;
}
.dinneroverview-pricetag {
float: right;
}
.confirm {
padding-left: 10px;
text-align: center;
padding-top: 40px;
}
#media (max-width: 766px) {
.sidebar {
width: 100%;
height: 40%;
position: static;
display: none;
background-color: #e5e6e8;
padding-bottom: 20px;
}
.confirm {
padding-top: 40px;
}
}
#media (min-width: 767px) {
.sidebar {
display: block !important;
border-right: solid;
height: 100% !important;
}
#hamburger {
display: none;
}
.hamburgerdiv {
display: none;
}
.menuitem {
width: 270px;
left: 20px;
}
}
#media (max-width: 360px) {
.confirm button {
width: 30px;
}
}
.dishsearch .keyword {
padding-right: 0px;
}
.dishsearch .select {
padding: 0px;
}
.dishsearch .search {
padding: 0px;
}
.searchbar {
border-style: solid;
border-color: black;
}
.main-bar {
position: relative;
left: 300px;
right: 0px;
}
.dishsearch {
padding-left: 10px;
padding-bottom: 20px;
border-bottom: solid;
position: sticky;
top: 100px;
z-index: 1;
background-color: white;
}
.dishsearch-dish {
text-align: center;
display: inline-block;
padding: 10px;
margin-top: 20px;
}
.dishreel {
top: 196px;
padding-top: 40px;
text-align: center;
}
.imgframe {
width: 146px;
height: auto;
margin: 0 auto;
border: solid;
background-color: #DCDCDC;
}
.dishsearch-img {
width: 140px;
height: 140px;
}
#media (min-width: 768px) {
.main-bar {
width: calc(100% - 297px);
}
}
<div id="root">
<div class="App">
<header class="App-header">
<div class="topdiv">
<h1 class="App-title">Dinner Planner</h1>
</div>
</header>
<div class="SelectDish">
<div class="Sidebar" id="sidebar">
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-12 sidebar collapse">
<div>
<div class="noofpeople">
<div class="row noofpeople-wrapper">
<label>People <input type="number" min="0" id="numberOfGuests" class="form-control"></label></div>
</div>
<div id="dinneroverview" class="dinneroverview">
<div class="dish-overview-header"><span class="dish-name">Dish name</span><span class="cost">Cost</span></div>
<div id="sidebar-dishes"></div>
<div class="dinneroverview-price">
<span id="sidebar-total-price" class="dinneroverview-pricetag">SEK 0.00</span>
</div>
<div class="confirm"><button id="confirm" type="button" class="btn btn-default">Confirm Dinner</button></div>
</div>
</div>
</div>
</div>
<div class="Dishes" id="dishSearcher">
<div class="col-lg-9 col-md-9 col-sm-9 col-xs-12 main-bar">
<div class="row dishsearch">
<div class="col-xs-12">
<h4>Find a dish</h4>
</div>
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-4 keyword">
<input type="text" id="searchbar" class="form-control" value=""></div>
<div id="dishsearcher-select" class="col-lg-3 col-md-3 col-sm-3 col-xs-4 select">
<select id="select" class="form-control">
</select>
</div>
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-4 search">
<button id="search-button" type="button" class="btn btn-default">search</button>
</div>
</div>
<div class="dishreel" id="dishreel">
<div class="dishsearch-dish handhover">
<div id="dish.id" class="imgframe">
<img src="https://spoonacular.com/recipeImages/cabbage-salad-with-peanuts-723984.jpg" class="dishsearch-img" alt="img">
<p>Cabbage Salad with Peanuts</p>
</div>
</div>
<div class="dishsearch-dish handhover">
<div id="dish.id" class="imgframe">
<img src="https://spoonacular.com/recipeImages/Garlicky-Pasta-with-Swiss-Chard-and-Beans-482788.jpg" class="dishsearch-img" alt="img">
<p>Garlicky Pasta with Swiss Chard and Beans</p>
</div>
</div>
<div class="dishsearch-dish handhover">
<div id="dish.id" class="imgframe">
<img src="https://spoonacular.com/recipeImages/Slow-Cooker-Vegetarian-Chili-with-Butternut-Squash-482574.jpg" class="dishsearch-img" alt="img">
<p>Slow Cooker Vegetarian Chili with Butternut Squash</p>
</div>
</div>
<div class="dishsearch-dish handhover">
<div id="dish.id" class="imgframe">
<img src="https://spoonacular.com/recipeImages/Beef-Liver-with-Fig--Bacon-and-Caramelized-Onion-Compote-[or-the-ultimate-beef-liver-]-551452.png" class="dishsearch-img" alt="img">
<p>Beef Liver with Fig, Bacon and Caramelized Onion Compote [or the ultimate beef liver ]</p>
</div>
</div>
<div class="dishsearch-dish handhover">
<div id="dish.id" class="imgframe">
<img src="https://spoonacular.com/recipeImages/steak-potato-kebabs-with-creamy-cilantro-sauce-for-two-695646.jpg" class="dishsearch-img" alt="img">
<p>Steak & Potato Kebabs with Creamy Cilantro Sauce for Two</p>
</div>
</div>
<div class="dishsearch-dish handhover">
<div id="dish.id" class="imgframe">
<img src="https://spoonacular.com/recipeImages/Roasted-vegetable---feta-tostada-222482.jpg" class="dishsearch-img" alt="img">
<p>Roasted vegetable & feta tostada</p>
</div>
</div>
<div class="dishsearch-dish handhover">
<div id="dish.id" class="imgframe">
<img src="https://spoonacular.com/recipeImages/blackened-salmon-tacos-with-cilantro-yogurt-sauce-551484.jpg" class="dishsearch-img" alt="img">
<p>blackened salmon tacos with cilantro yogurt sauce</p>
</div>
</div>
<div class="dishsearch-dish handhover">
<div id="dish.id" class="imgframe">
<img src="https://spoonacular.com/recipeImages/Three-Bean-Greek-Kale-Salad-609091.jpg" class="dishsearch-img" alt="img">
<p>Three Bean Greek Kale Salad</p>
</div>
</div>
<div class="dishsearch-dish handhover">
<div id="dish.id" class="imgframe">
<img src="https://spoonacular.com/recipeImages/Cedar-Planked-Salmon-with-Fresh-Sorrel-Sauce-610524.jpg" class="dishsearch-img" alt="img">
<p>Cedar-Planked Salmon with Fresh Sorrel Sauce</p>
</div>
</div>
<div class="dishsearch-dish handhover">
<div id="dish.id" class="imgframe">
<img src="https://spoonacular.com/recipeImages/liver-and-onions-w_-gravy-2-146557.jpg" class="dishsearch-img" alt="img">
<p>Liver and Onions W/ Gravy</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
To my great frustration, the header, with the text "Dinner Planner" doesn't stick to the top. I've tried a bunch of combinations of fixed and sticky elements, but nothing does the trick. How can I make the header stick to its position when scrolling just like the sidebar and the search bar?

Answer 1

.header {
position: sticky;
top: 0;
background: #fff;
}

Answer 2

Look at this picture:
This is what you want, right?
Basically you have four divs. Three are fixed (top-header, search bar and side bar), and the last one (search-results) is relative. Start with this in mind, then create the HTML structure, then the CSS. Please take a look at the next simple example:
html, body{
margin: 0;
padding: 0;
}
#top-header{
background-color: #000;
color: #fff;
position: fixed;
height: 100px;
left: 0;
right: 0;
top: 0;
z-index: 100;
}
#side-menu{
background-color: #ff0000;
color: #fff;
position: fixed;
left: 0;
width: 200px;
top: 100px;
bottom: 0;
z-index: 100;
}
#search-bar{
background-color: #00ff00;
color: #000;
position: fixed;
left: 200px;
right: 0;
top: 100px;
height: 50px;
z-index: 100;
}
#search-results{
position: relative;
z-index: 50;
height: 1500px; /*remove me*/
background-color: #ccc;
margin-left: 200px;
margin-top:150px;
}
<div id="root">
<div class="App">
<header id='top-header'>
top header
</header>
<div id='side-menu'>
side bar
</div>
<div id='search-bar'>
search bar
</div>
<div id='search-results'>
search results
</div
</div>
</div>
You will scroll only inside search results, as you want. Using this simple example you can update your CSS code.
Use position: fixed; to make them stay fixed, and the relative container push it down using margin-top and margin-left. Make sure that the z-index value on the fixed elements is greater than the one in relative element.