Hello , after i changed my #nav-block to position: fixed when i scroll my nav links stop working , can someone please help me ?
<!DOCTYPE html>
<html>
<head lang="en">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header id="header">
<div id="nav-block">
<img id="header-img" src="https://drive.google.com/uc?export=download&id=1UmmWZj7i6W1cRK5s4l7Ui8NgusL9zvNB" alt="Myotte esscentials logo">
<nav id="nav-bar">
<ul>
<li class="nav-left"><a class="nav-link" href="#about">about us</a></li>
<li class="nav-left"><a class="nav-link" href="#Products">Products</a></li>
<li class="nav-left"><a class="nav-link" href="#Home">Home</a></li> <!-- satisfies requirements -->
<li class="nav-right" ><a class="nav-link" href="#login">login</a></li> <!-- satisfies requirements -->
<li class="nav-right"><a class="nav-link" href="#sign-up">sign up</a></li> <!-- satisfies requirements -->
</ul>
</nav>
</div>
</header>
<main>
<section id="about">
<div>
<video id="video" autoplay muted loop>
<source src="https://drive.google.com/uc?export=download&id=1hxqB4eym0dUCNPVrfrmhyFKxMaL40BsG" type="video/mp4">
<source src="https://drive.google.com/uc?export=download&id=1hxqB4eym0dUCNPVrfrmhyFKxMaL40BsG" type="video/ogg">
</video>
<h2>About us !</h2>
<p>Welcome to Myotte Essentials, your ultimate destination for luxurious natural body care products in Trinidad and Tobago! Discover the essence of pure beauty and self-care as we bring you a curated selection of products crafted with the finest natural oils and butters. Our commitment to harnessing the power of nature ensures that you experience the rejuvenating benefits of these exquisite ingredients, leaving your skin and senses nourished, revitalized, and indulged. From sumptuous body butters to rejuvenating facial oils, each product is thoughtfully handpicked to provide you with an authentic pampering experience. Embrace the goodness that nature offers and embark on a journey to radiant well-being with our exceptional range of natural body care solutions.</p>
</div>
</section>
<section id="Products"></section>
<section id="Home"></section>
<section id="sign-up"></section> <!-- satisfies requirements -->
<section id="login"></section> <!-- satisfies requirements -->
<form id="form" action="https://www.freecodecamp.com/email-submit">
<fieldset>
<label>First Name: <input type="text" placeholder="eg... 'Dwayne'"></label>
<label>Last Name: <input type="text" placeholder="eg... 'Lee Fook'"></label>
<label>Email Address: <input id="email" name="email" type="email" placeholder="eg... xvy@mail.com"></label>
<input id="submit" type="submit">
</fieldset>
</form>
</main>
</body>
</html>
:root {
--color1: #06b993;
--color2: #ecbc84;
--color3: #10716c;
--color4: #86c08c;
}
* {
box-sizing: border-box;
}
body {
margin: 0;
background: whitesmoke;
}
#nav-block {
display: flex;
height: 12.5%;
background: linear-gradient(45deg , var(--color3) 25% , var(--color1), var(--color1), var(--color1) );
/*opacity: .6;*/
position: fixed;
top: 0;
width: 100%;
}
img {
width: 30vw;
height: 30vh;
border-radius: 50%;
padding: none;
position: relative;
top: 0;
left: -2px;
margin-left: 0;
background: transparent;
}
#nav-bar {
display: flex;
align-items: end;
width: 100%;
font-size: 1.3rem;
}
#nav-bar ul {
width: 100%;
margin-right: 1%;
padding-left: 0;
list-style-type: none;
}
li {
display: inline-block;
}
.nav-left{
float: left;
}
.nav-right {
float: right;
}
.nav-left, .nav-right {
margin-left: 1rem;
}
.nav-link {
text-decoration: none;
padding: .5rem;
color: var(--color2);
}
.nav-link:hover {
border-radius: 1rem;
border: 1px solid whitesmoke;
color: whitesmoke;
}
/* End of Header / Navigational bar */
#about {
border-radius: .5rem;
}
#video {
width: 100vw;
height: 100vh;
}
