My navbar, div element with class topnav, won’t stay on top of the page. I can’t find a code that works to target it. How can I get my css to make the navbar stick on top?
my css of the navbar:
.topnav {position: fixed; width: 100px;height: auto;
overflow: hidden; top:0; left:0;display:fixed;
/* file: index.html */
<!DOCTYPE html><html><header id="header"><div class="topnav"><nav id="nav-bar"><a class="nav-link" href="#about">About us</a><a class="nav-link" href="#collection">collection</a><a class="nav-link" href="#FAQ">FAQ</a></nav></div>
<h1>Handcrafted, home-made masterpieces</h1><img src="https://www.vectorstock.com/royalty-free-vector/necklace-icon-logo-design-template-vector-35966735</header" alt="necklace logo" id="header-img" />
</header>
<form id="form" action="https://www.freecodecamp.com/email-submit"><input id="email" type="email" placeholder="your email address" name="email"/>
<input type="submit" id="submit" value="submit" href="https://www.freecodecamp.com/email-submit" /></form>
<p id="about">Since 2009 we have been making jewellery with a Mediterranean essence.</p>
<p id="collection">Discover the Anartxy collections, full of rebellion and originality.</p>
<p id="FAQ">You can choose between payment by bank card, PayPal or Bizum.</p>
<iframe id="video" src="https://www.youtube.com/watch?v=YaCz-kbNoAs">
<link rel="stylesheet" href="styles.css">
</html>
/* file: styles.css */
.topnav {position: relative; width: 100px;height: auto;
overflow: hidden; top:0; left:0;display:fixed; justify-content: center; }
.navlink {position: fixed; top:0;float: center;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;margin-bottom: 100px; background-color:#f2f2f2;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;float: right;}
h1, {font-family: Montserrat, sans-serif}
**Your browser information:**
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/103.0.5060.134 Safari/537.36 Edg/103.0.1264.71
Challenge: Product Landing Page - Build a Product Landing Page
Link to the challenge: