Having trouble with implementing a sticky header? Here's a simplified version of the code:
HTML:
<div class="page">
<div class="header">
kkk
</div>
<div class="nav">
kkk
</div>
<div class="main">
<div class="item">kkk</div>
<div class="item">kkk</div>
<div class="item">kkk</div>
<div class="item">kkk</div>
<div class="item">kkk</div>
<div class="item">kkk</div>
<div class="item">kkk</div>
<div class="item">kkk</div>
<div class="item">kkk</div>
<div class="item">kkk</div>
</div>
</div>
CSS:
.page {
height: 100vh;
display: grid;
grid-template-rows: auto 1fr;
grid-template-columns: auto;
grid-template-areas:
"header header header"
"nav main main";
}
.header {
position:sticky;
top:0;
height: 120px;
background: blue;
grid-area: header;
}
.nav {
height: 100%;
background: red;
grid-area: nav;
}
.main {
background: green;
grid-area: main;
.item {
height: 50px;
padding: 20px;
}
Looking for a solution to make the header stay on screen while scrolling down? Any suggestions that would work with this layout?