Looking for some help with my website's navbar - it works fine until I scroll past the blue section, then it disappears along with other elements. Any suggestions on how to fix this? Thanks!
<!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>
...
@import url('https://fonts.googleapis.com/css2?family=Outfit:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e295858a96a2d3d2d2ccccdbd2d2">[email protected]</a>&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 removing the navbar from the body section and adjusting the position of body-page elements.