<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- To place the footer at the bottom of the page -->
<style>
html,
body {
height: 100%;
}
#root {
min-height: 100%;
display: flex;
flex-direction: column;
}
header {
position: absolute; /* To pull the header out of the document flow */
}
main {
flex: 1;
}
</style>
<title>Document</title>
</head>
<body>
<div id="root">
<header>
<h1></h1>
<nav></nav>
</header>
<main></main>
<footer></footer>
</div>
</body>
</html>
Let’s say h1 and nav is placed within header tag and this would look like below:
What I want to achieve is keeping the nav
tag on top of the page while the h1
tag is being scrolled as usual:
I’ve tried adding position: sticky;
and top: 0;
, but it doesn’t seem to be working as the nav tag is placed within the header tag.
Should I be using JavaScript to achieve this? or is it possible to solve with plain CSS only?