Your #nav-bar should always be at the top of the viewport. this one i am stuck here please help me with this

HTML-CSS
1

Tell us what’s happening:
Describe your issue in detail here.

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html>
  <head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Product Landing Page</title>
<link href="styles.css" rel="stylesheet"/>
</head>
  <body>
    <header id="header">
      <img id="header-img" src="https://bloggytalky.com/wp-content/uploads/2017/07/create-a-free-logo-design-logo-designs-design-a-free-logo-design-a-free-logo-alltech-just-free-logo-design.png">
<h1>Original Trombones</h1>
<nav id="nav-bar">
  <a href="#Materials" class="nav-link">Features</a>
  <a href="#video" class="nav-link">How it Works</a>
  <a href="#Pricing" class="nav-link">Pricing</a>
</nav>
      
      <main>
      <section>
<h2>Handcrafted, home-made masterpieces</h2>
<form id="form" action="https://www.freecodecamp.com/email-submit">
<div class="email">
<input id="email"name="email" type="email" placeholder="Enter your email address" minlenght="5" pattern required></input>
</div>
<input id="submit" type="submit">
</input> 
</section>
</form>
<section>
  <div id="Materials">
<img src="https://i.pinimg.com/originals/3b/fe/c1/3bfec1ae48f7f5793e90aadc10794612.png">
<h3>Premium Materials</h3>
<p>Our trombones use the shiniest brass which is sourced locally. This will increase the longevity of your purchase.</p>
<img src="https://www.kindpng.com/picc/m/383-3831052_free-delivery-truck-free-home-delivery-logo-hd.png">
<h4>Fast Shipping</h4>
<p>We make sure you recieve your trombone as soon as we have finished making it. We also provide free returns if you are not satisfied.</p>
<img src="https://cdn2.iconfinder.com/data/icons/seo-internet-marketing-4/256/Page_Quality-512.png">
<h5>Quality Assurance</h5>
<p>For every purchase you make, we will ensure there are no damages or faults and we will check and test the pitch of your instrument.</p>
<iframe id="video" src="https://www.youtube.com/embed/y8Yv4pnO7qc" title="Roman Carnival Overture Op. 9 for Five Trombones"frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen >
</iframe>
</section>

<div id="Pricing">
<h6>TENOR TROMBONE
<p>$600</p>
<p>Lorem ipsum.</p>
<p>Lorem ipsum.</p>
<p>Lorem ipsum dolor.</p>
<p>Lorem ipsum.</p>
<input type ="submit" id="submit"></input>
</h6>

<h7>BASS TROMBONE
  <p>$900</p>
  <p>Lorem ipsum.</p>
  <p>Lorem ipsum.</p>
  <p>Lorem ipsum dolor.</p>
  <p>Lorem ipsum.</p>
<input type="submit" id="submit"></input>
</h7>
<h8>
 <p> VALVE TROMBONE </p>
  <p>$1200</p>
<p>Plays similar to a Trumpet</p>
<p>Great for Jazz Bands</p>
<p>Lorem ipsum dolor.</p>
<p>Lorem ipsum.</p>
<input type="submit" id="submit"></input>
</h8>
  </div>
</header>
  </body>
</html>

/* file: styles.css */
#header-img {
  width: 45px;
}
img{
  width: 80px;
}
@media only screen and (width:300px){
 #video{
  width: 30px;
  }
}
#nav-bar{
display: flex;
justify-content: space-between;
}
#submit{
background-color: orange;
border: auto;
width: 129px;
font-weight: bold;
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/114.0.0.0 Safari/537.36

Challenge: Product Landing Page - Build a Product Landing Page

Link to the challenge:

2

Fix the position of the navbar by adding the ‘position’ property set to the value of the “fixed”, the ‘left’ property set to the value of the “0”, and the ‘top’ property set to the value of the “0”:

#nav-bar{
display: flex;
justify-content: space-between;
  position: fixed;
  left: 0;
  top: 0;
}
3

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.