I’m trying to make a navbar for my website, but once I scroll past the blue section, I find the element stops sticking to the top and disappears with the other elements. How might I address this? Thank you!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Elsa Frankel | Portfolio</title>
<link rel="stylesheet" href="styles.css">
</head>
<nav id="navbar">
<h1>My Name</h1>
<div id="nav-buttons">
<a href="#home">Home</a>
<a href="#projects">Projects</a>
<a href="#resoucres">Resources</a>
<a href="#consulting">Consulting</a>
</div>
<div id="socials">
<a href="" id="linkedin">icon</a>
<a href="" id="tiktok">icon</a>
<a href="" id="email">icon</a>
</div>
</nav>
<body>
<div class="body-page" id="home">
<div class="inner-container">
<div class="home-section" id="academic">
<img class="home-img" id="">
</div>
<div class="home-section" id="professional">
<img class="home-img" id="">
</div>
</div>
</div>
<div class="body-page" id="projects">
<div class="inner-container">
<div class="projects-section" id="">
<img class="projects-img" id="">
</div>
<div class="projects-section" id="">
<img class="projects-img" id="">
</div>
<div class="projects-section" id="">
<img class="projects-img" id="">
</div>
</div>
</div>
<div class="body-page" id="resources">
<div class="inner-container">
<div class="resources-section" id="college-students">
<img class="resources-img" id="">
</div>
<div class="resources-section" id="high-school-students">
<img class="resources-img" id="">
</div>
<div class="resources-section" id="misc">
<img class="resources-img" id="">
</div>
</div>
</div>
<div class="body-page" id="consulting">
<div class="inner-container">
<div class="consulting-section" id="">
<img class="consulting-img" id="">
</div>
<div class="consulting-section" id="">
<img class="consulting-img" id="">
</div>
<div class="consulting-section" id="">
<img class="consulting-img" id="">
</div>
<div class="consulting-section" id="">
<img class="consulting-img" id="">
</div>
</div>
</div>
</body>
</html>
@import url('https://fonts.googleapis.com/css2?family=Outfit:[email protected]&display=swap');
* {
margin: 0;
padding: 0;
scroll-behavior: smooth;
}
body {
position: absolute;
top: 0; /* Header Height */
bottom: 0px; /* Footer Height */
width: 100%;
height: 100%;
font-family: "Outfit", sans-serif;
}
nav {
background-color: #F8F8F8;
position: sticky;
height: 9%;
box-shadow: 0px 2px 10px #4d4d4d;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
padding: 0 2em;
top: 0;
z-index: 999;
}
#nav-buttons a{
margin: 0 0.7em;
}
h1 {
font-weight: 800;
font-size: 1.5em;
}
.body-page {
height: 100%;
width: 100%;
background-color: brown;
}
#home {
background-color: blue;
}
I tried taking the navbar out of the body section and changing the position of body-page elements.
1