Product Landing Page - Build a Product Landing Page - #nav-bar position

HTML-CSS
1

My code is failing only one test:
Your #nav-bar should always be at the top of the viewport.
I usually can find the CSS class in dev tools, but I have not been able to find ANY IDs. How can I find CSS IDs using dev tools? How can I position the ‘#nav-bar’ to always be at the top of the viewport?
Thank you!

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="styles.css">
  <title>Landing Page</title>
</head>

<body>
 <div id="page-wrapper">
  <header id="header">
   <div class="logo">
    <img src="https://cdn.pixabay.com/photo/2016/03/29/10/38/saxophone-1287911_1280.png" id="header-img" width="100vw"/>
    </div>
    <nav id="nav-bar">
    <ul>
      <li>
        <a class="nav-link" href="#features">Features</a>
        </li>
      <li>
        <a class="nav-link" href="#how-it-works">How It Works</a>
        </li>
      <li>
        <a class="nav-link" href="#pricing">Pricing</a>
        </li>    
      </ul>
   </nav>
  </header>
 
 <div class="container"></div>
 <section id="hero">
   <h2>Handcrafted, home-made masterpieces</h2>
   <form id="form" action="https://www.freecodecamp.com/email-submit">
    <input name="email" id="email" type="email" placeholder="Enter your email address" required>
    <input id="submit" type="submit" value="Get Started" class="btn">  
    </form>
  </section>


<div class="container">

 <section id="features">
  <div class="grid">
    <div class="icon">
      <i class="fa fa-3x fa-fire">
        </i>
    </div>
    <div class="desc">
      <h2>Premium Materials</h2>
      <p>Our saxophones use the shiniest brass which is sourced locally. This will increase the longevity of your purchase.</p>
      </div>
    </div>
  <div class="grid">
    <div class="icon">
      <i class="fa fa-3x fa-truck"></i>
    </div>
    <div class="desc">
      <h2>Fast Shipping</h2>
      <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>
    </div>
  </div>

<div class="grid">
  <div class="icon">
    <i class="fa fa-3x fa-battery-full" aria-hidden="true"></i>
  </div>
  <div class="desc">
    <h2>Quality Assurance</h2>
    <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>
  </div>
 </div>
</section>


 <section id="how-it-works">
  <iframe id="video" height="315" src="https://www.youtube.com/watch?v=Gdn5d55vArw&pp=ygUOc2F4b3Bob25lIHRyaW8%3D" frameborder="0" allowfullscreen></iframe>
  </section>

 <section id="pricing">
  <div class="product" id="alto">
   <div class="level">Alto Saxophone</div>
   <h2>$600</h2>
   <ol>
    <li>Lorem ipsum.</li>
    <li>Lorem ipsum.</li>
    <li>Lorem ipsum.</li>
  </ol>
    <button class="btn">Select</button>
  </div>
<div class="product" id="tenor"></div>

  <div class="product" id="tenor">
   <div class="level">Tenor Saxophone</div>
   <h2>$900</h2>
   <ol>
    <li>Lorem ipsum.</li>
    <li>Lorem ipsum.</li>
    <li>Lorem ipsum.</li>
  </ol>
    <button class="btn">Select</button>
  </div>   

 <div class="product" id="soprano"></div>
   <div class="product" id="soprano">
   <div class="level">Soprano Saxophone</div>
   <h2>$900</h2>
   <ol>
    <li>Lorem ipsum.</li>
    <li>Lorem ipsum.</li>
    <li>Lorem ipsum.</li>
  </ol>
    <button class="btn">Select</button>
  </div>   


  </section>
 <footer>
   <ul>
    <li>
      <a href="#">Privacy</a>
    </li>
    <li>
      <a href="#">Terms</a>
    </li>
    <li>
      <a href="#">Contact</a>
    </li>
   </ul>
   <span>Copyright 2016, Original Saxophones</span>
 </footer>





  </div>  
 </div>
</body>
</html>

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/116.0.0.0 Safari/537.36

Challenge: Product Landing Page - Build a Product Landing Page

Link to the challenge:

2

Hello!

You are doing great!

Do you have CSS code that you could post for the community to see and assist you, please?

3

Thank you so much for the encouragement! I really appreciate it and your support.

Normally I can Inspect the example page (in this case - https://product-landing-page.freecodecamp.rocks/) and find everything I need in order to replicate. But I have noticed I can never see the CSS IDs in the Elements tab of Dev Tools. I can see the classes, but not the IDs. Why is that?

CSS

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

header {
  top: 0;
  min-height: 75px;
  padding: 0px 20px;
  display: flex;
  flex-direction: row;
  flex-wrap: no-wrap;
  justify-content: space-around;
  align-items: center;
}

#nav-bar {
  justify-content: top;
}

body {
  background-color: #eee;
  font-family: Lato, sans-serif;
}

@media (max-width: 600px) {
  header {
    flex-wrap: wrap;
  }
}

.grid {
  display: flex;
}

#page-wrapper {
  position: relative;
}

nav > ul {
  width: 35vw;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}

.logo {
  width: 60vw;
}
4

You will go far because you use your inquisitive nature to try to resolve the problems. But, asking for help is not a problem. It is actually encouraged so both you and people, like me, can learn from helping you and others. You are encouraged to help others, if you feel you can, too.

I am just going to check it now. :slight_smile:

5

Try adding position fixed to your header.

Let me know how that goes, please?

6

That worked! What’s funny, is that I forgot I removed it earlier, because in Preview it looked like the header text was overlapping the body text. Thank you!

7

I forget many things. Just glad to help.

Onward and upward!
Great going!

1 Like