Why my sticky navigation only works when my header is set to be inline?
This is my HTML file:
.jumbotron {
font-size: 20px;
padding: 60px;
background-color: #00a8ec;
text-align: center;
color: white;
}
header {
display: inline;
}
nav {
background-color: #00b2a6;
padding: 5px;
position: sticky;
top: 0;
}
footer {
padding: 20px;
color: white;
background-color: #00b2a6;
text-align: center;
font-weight: bold;
}<!DOCTYPE html>
<html>
<head>
<title>TITLE</title>
<link rel="stylesheet" href="tes.css">
</head>
<body>
<header>
<div class="jumbotron">
<h1>TITLE</h1>
<p>DESCRIPTION</p>
</div>
<nav>
<ul>
<li><a href="#sejarah">Sejarah</a></li>
<li><a href="#geografis">Geografis</a></li>
<li><a href="#wisata">Wisata</a></li>
</ul>
</nav>
</header>
<main>
<div id="content">
<pre>Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
</pre>
</div>
<footer>
<p>FOOTER</p>
</footer>
</body>
</html>I still do not understand why my sticky navigation will only work if I set the header item in HTML with display:inline ? If I remove that property, the sticky navigation will not work anymore.
I am in my way in learning HTML and CSS, thank you very much for your support!
You found a hack to force it to work. When using inline you will have block level elements inside inline level element which is invalid and it's like the inline element no more exist (this is a simplified explanation, in reality it's a bit more complex1).
Your code is exactly like not having header:
.jumbotron {
font-size: 20px;
padding: 60px;
background-color: #00a8ec;
text-align: center;
color: white;
}
nav {
background-color: #00b2a6;
padding: 5px;
position: sticky;
top: 0;
}
footer {
padding: 20px;
color: white;
background-color: #00b2a6;
text-align: center;
font-weight: bold;
}<div class="jumbotron">
<h1>TITLE</h1>
<p>DESCRIPTION</p>
</div>
<nav>
<ul>
<li><a href="#sejarah">Sejarah</a></li>
<li><a href="#geografis">Geografis</a></li>
<li><a href="#wisata">Wisata</a></li>
</ul>
</nav>
<main>
<div id="content">
<pre>Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
</pre>
</div>
<footer>
<p>FOOTER</p>
</footer>Sticky won't work if you wrap it inside another container. It need to be directly placed inside your body where you have the long content .
When using header, add border to understand the issue:
.jumbotron {
font-size: 20px;
padding: 60px;
background-color: #00a8ec;
text-align: center;
color: white;
}
header {
border:5px solid red;
}
nav {
background-color: #00b2a6;
padding: 5px;
position: sticky;
top: 0;
}
footer {
padding: 20px;
color: white;
background-color: #00b2a6;
text-align: center;
font-weight: bold;
}<header>
<div class="jumbotron">
<h1>TITLE</h1>
<p>DESCRIPTION</p>
</div>
<nav>
<ul>
<li><a href="#sejarah">Sejarah</a></li>
<li><a href="#geografis">Geografis</a></li>
<li><a href="#wisata">Wisata</a></li>
</ul>
</nav>
</header>
<main>
<div id="content">
<pre>Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
</pre>
</div>
<footer>
<p>FOOTER</p>
</footer>Your element has no room to become sticky because its already at the bottom edge of its container.
Related questions:
Why position:sticky is not working when the element is wrapped inside another one?
Why bottom:0 doesn't work with position:sticky?
1From the specification:
The containing block of a static, relative, or sticky box is as defined by its formatting context.
In your case we are inside a Block Formatting Context so
the containing block is formed by the content edge of the nearest block container ancestor box. ref
And
sticky
Identical to relative, except that its offsets are automatically adjusted in reference to the nearest ancestor scroll container’s scrollport (as modified by the inset properties) in whichever axes the inset properties are not both auto, to try to keep the box in view within its containing block as the user scrolls. ref