Menu
body {
background-color:olive;
margin:0;
}
nav {
background-color:aqua;
}
#container{
max-height:1800px;
display:flex;
flex-direction:row;
position:sticky;
}
a {
background-color:chocolate;
padding:7px;
border-radius:10px;
text-decoration:none;
}
#container > a:hover{
opacity:0.5;
}
#item-2, #item-3, #item-1, #item-0 {
align-self:flex-start;
margin-top:5px;
}
#logout {
align-self:flex-end;
}
}
/* nav is finally done after 1.5 hours lol and another 30mins */
#bear-nest {
display:flex;
flex-direction:row;
justify-content:flex-end;
align-items:center;
}
img {
border-radius:20%;
display: block;
margin-left: auto;
margin-right: auto;}
#bear > p {
text-align:center;
margin-left:auto;
margin-right:auto;
width:70%;
}
hr {
border: 1px solid black;
}
.middle {
display:flex;
justify-content:center;
align-self:flex-start;
}
}<body>
<nav>
<div id="main-content">
<div id="container" >
<a id="main" class="bonus" href="#">Main</a>
<a id="information" class="bonus" href="information.html">Information</a>
<a id="contacts" class="bonus" href="contacts.html">Contacts</a>
<a id="media" class="bonus" href="media.html">Media</a>
<a id="logout" href="logout.html">Log out</a>
</div>
</div>
</nav>
<main>
<div id="bear-nest">
<div id="american-bear-nest">
<div class="middle">
<p>The American black bear</p>
</div>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/08/01_Schwarzb%C3%A4r.jpg/220px-01_Schwarzb%C3%A4r.jpg" alt="bear" title="The American black bear">
<div id="bear"><p>The American black bear (Ursus americanus) is a medium-sized bear native to North America. It is the continent's smallest and most widely distributed bear species. Black bears are omnivores, with their diets varying greatly depending on season and location. They typically live in largely forested areas, but do leave forests in search of food. Sometimes they become attracted to human communities because of the immediate availability of food. The American black bear is the world's most common bear species.
It is listed by the International Union for Conservation of Nature (IUCN) as a least-concern species, due to its widespread distribution and a large population estimated to be twice that of all other bear species combined. Along with the brown bear, it is one of only two of the eight modern bear species not considered globally threatened with extinction by the IUCN. American black bears often mark trees using their teeth and claws as a form of communication with other bears, a behavior common to many species of bears.</p><hr></div>
<div class="middle">
<p>Asian black bear</p>
</div>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b7/Ursus_thibetanus_3_%28Wroclaw_zoo%29.JPG/220px-Ursus_thibetanus_3_%28Wroclaw_zoo%29.JPG" alt="asian bear" title="Asian black bear">
<div id="bear"><p>The Asian black bear (Ursus thibetanus, previously known as Selenarctos thibetanus), also known as the moon bear and the white-chested bear, is a medium-sized bear species native to Asia and largely adapted to arboreal life.[2][3] It lives in the Himalayas, in the northern parts of the Indian subcontinent, Korea, northeastern China, the Russian Far East, the Honshū and Shikoku islands of Japan, and Taiwan. It is classified as vulnerable by the International Union for Conservation of Nature (IUCN), mostly because of deforestation and hunting for its body parts.[1]
The species is morphologically very similar to some prehistoric bears, and is thought by some scientists to be the ancestor of other extant bear species (aside from pandas and spectacled bears).[2] Though largely herbivorous, Asian black bears can be very aggressive toward humans, who frequently trap or kill them for traditional medicine.[4] </p></div>
</div>
</div>
</main>
</body>Hello , currently I'm trying to make navbar sticky as I start scrolling down. But it doesn't seem to work no matter what I do. So far I've tried to apply it to tag because I really thought it would work. I also tried to apply it to #main-content and #content , but literally none of them seemed to work. Any explanation would be useful
822
asked Mar 20 '26 22:03
If you want to make your navbar sticky, apply position:sticky to nav not to #container. You also need to specify a top position. In your case top:0
Read more here about position:sticky
See snippet below
body {
background-color:olive;
margin:0;
}
nav {
background-color:aqua;
position:sticky;
top:0px;
}
#container{
max-height:1800px;
display:flex;
flex-direction:row;
}
a {
background-color:chocolate;
padding:7px;
border-radius:10px;
text-decoration:none;
}
#container > a:hover{
opacity:0.5;
}
#item-2, #item-3, #item-1, #item-0 {
align-self:flex-start;
margin-top:5px;
}
#logout {
align-self:flex-end;
}
}
/* nav is finally done after 1.5 hours lol and another 30mins */
#bear-nest {
display:flex;
flex-direction:row;
justify-content:flex-end;
align-items:center;
}
img {
border-radius:20%;
display: block;
margin-left: auto;
margin-right: auto;}
#bear > p {
text-align:center;
margin-left:auto;
margin-right:auto;
width:70%;
}
hr {
border: 1px solid black;
}
.middle {
display:flex;
justify-content:center;
align-self:flex-start;
}
}<body>
<nav>
<div id="main-content">
<div id="container" >
<a id="main" class="bonus" href="#">Main</a>
<a id="information" class="bonus" href="information.html">Information</a>
<a id="contacts" class="bonus" href="contacts.html">Contacts</a>
<a id="media" class="bonus" href="media.html">Media</a>
<a id="logout" href="logout.html">Log out</a>
</div>
</div>
</nav>
<main>
<div id="bear-nest">
<div id="american-bear-nest">
<div class="middle">
<p>The American black bear</p>
</div>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/08/01_Schwarzb%C3%A4r.jpg/220px-01_Schwarzb%C3%A4r.jpg" alt="bear" title="The American black bear">
<div id="bear"><p>The American black bear (Ursus americanus) is a medium-sized bear native to North America. It is the continent's smallest and most widely distributed bear species. Black bears are omnivores, with their diets varying greatly depending on season and location. They typically live in largely forested areas, but do leave forests in search of food. Sometimes they become attracted to human communities because of the immediate availability of food. The American black bear is the world's most common bear species.
It is listed by the International Union for Conservation of Nature (IUCN) as a least-concern species, due to its widespread distribution and a large population estimated to be twice that of all other bear species combined. Along with the brown bear, it is one of only two of the eight modern bear species not considered globally threatened with extinction by the IUCN. American black bears often mark trees using their teeth and claws as a form of communication with other bears, a behavior common to many species of bears.</p><hr></div>
<div class="middle">
<p>Asian black bear</p>
</div>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b7/Ursus_thibetanus_3_%28Wroclaw_zoo%29.JPG/220px-Ursus_thibetanus_3_%28Wroclaw_zoo%29.JPG" alt="asian bear" title="Asian black bear">
<div id="bear"><p>The Asian black bear (Ursus thibetanus, previously known as Selenarctos thibetanus), also known as the moon bear and the white-chested bear, is a medium-sized bear species native to Asia and largely adapted to arboreal life.[2][3] It lives in the Himalayas, in the northern parts of the Indian subcontinent, Korea, northeastern China, the Russian Far East, the Honshū and Shikoku islands of Japan, and Taiwan. It is classified as vulnerable by the International Union for Conservation of Nature (IUCN), mostly because of deforestation and hunting for its body parts.[1]
The species is morphologically very similar to some prehistoric bears, and is thought by some scientists to be the ancestor of other extant bear species (aside from pandas and spectacled bears).[2] Though largely herbivorous, Asian black bears can be very aggressive toward humans, who frequently trap or kill them for traditional medicine.[4] </p></div>
</div>
</div>
</main>
</body>NOTE: you could also use position:fixed on nav but then you should add a margin-top to #container equal to the nav height.
nav {
position:fixed;
top:0;
width:100%;
}
#container {
margin-top:100px;/* nav height */
}
NOTE2 : Please format your CSS ( you find online tools for that )
131
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
