My sticky nav bar isn't working/ partially working
Sebastian Wright 
I'd like to make a sticky nav bar like the one in this link:
However, when I add the positon: sticky; property to the element in my code it works and the nav bar sticks after scrolling but when i scroll further down it goes away.
I would like it so that the nav bar is sticky just like the one in the example.
<!DOCTYPE html>
<html>
<head> <title> Apex Legends Fan-site </title> <link rel="stylesheet" type="text/css" href="/CSS/cssfile.css">
</head>
<body> <header> <img src="../Images/Logo/apexlogo.png" height=150px;> </header> <nav> <ul> <li><a href="../Home/home.html">Home</a></li> <li><a href="../Legends/legends.html">Legends</a></li> <li><a href="#">News</a></li> <li><a href="#">About</a></li> <li><a href="#">Submissions</a></li> </ul> </nav> <div> <button> <img src="../Images/Body_Images/apexlegends.jpg" width="40%"> </button> </div> <section> <p> Apex Legends is a free-to-play first-person shooter battle royale game developed by Respawn Entertainment and published by Electronic Arts. It was released for Microsoft Windows, PlayStation 4, and Xbox One on February 4, 2019, without any prior announcement or marketing. A Nintendo Switch version is planned for release in late 2020, along with cross-platform play between all supported platforms set to release on October 6, 2020. </p> <img src="../Images/Body_Images/image1.jpg" width="50%"> <p> In Apex Legends, up to 20 three-person squads or 30 two-person duos land on an island and search for weapons and supplies before attempting to defeat all other players in combat. The available play area on the island shrinks over time, forcing players to keep moving or else find themselves outside the play area which can be fatal. The final team alive wins the round. The game is set in the same science fiction universe as Respawn Entertainment's Titanfall and Titanfall 2.</p> </section>
</body>
</html>/* Header */
header h1 { color: firebrick; -webkit-text-stroke: 0.5px rgb(255, 255, 255); font-size: 50px; text-align: center;
}
header { border: 2px solid rgb(102, 102, 102); margin-top: 10px; margin-bottom: 10px; border-radius: 10px; padding: 0px; background-image: linear-gradient( to left, black 45%, rgb(94, 5, 5)); overflow: hidden;
}
/* Navigation Bar */
nav { width: 100%; overflow: hidden;
}
nav ul { list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #333;
}
.sticky { position: sticky; top: 0;
}
nav li { float: left; border-right: 1px solid #bbb; border-top-right-radius: 0px; border-radius: 10px; width: 19.8%;
}
nav li a { display: block; color: white; text-align: center; padding: 10px 50px; margin: 0px; text-decoration: none; font-size: 20px; line-height: 25px; border-radius: 4px; display: block; text-align: center; overflow: hidden;
}
/*@media screen and (max-width: 1000px) {
nav li a:last-child {
font-size: 13px;
}
}*/
nav li:hover { background-color: red;
}
/* Background */
.homebackground { background-image: url("../Images/background/background1.jpg"); background-position: center; background-repeat: repeat; background-size: cover; height: 100%;
}
@media screen and (max-width: 1000px) { .homebackground { background-image: url("../Images/background/background.jpg"); background-position: center; background-repeat: no-repeat; background-size: cover; height: 100%; }
}
.legendsbackground { background-color: black;
}
body { margin: 0px;
}
/* For positioning images */
.center { display: block; margin-left: auto; margin-right: auto;
}
.center1 { display: block; margin-left: auto; margin-right: auto; margin-top: 40px; margin-bottom: 40px;
}
/* For hover-highlight in Legends Section */
.octane { margin-top: 20%; margin-bottom: 0px; margin-left: 70%; margin-right: 0;
}
.green :hover { background-image: url(../Images/Legends_pics/octanechibihover.png);
}
/* For assigning properties to divs */
.border { margin-top: 40px; border: 4px solid #953036; background-color: #953036;
}
/* Paragraph Containers */
.pcontainer { color: aliceblue; margin: 10px; padding: 20px; border: 4px solid #953036; background-color: rgb(12, 12, 12); font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; border-radius: 10px;
}1 Answer
remove height:100% from .homebackgroundYou are good to go.
And please don't include class in your body , It's a good practice.
If you want to look at the code, Here's my pen
Let me know if it works for you or not.
2
