Responsive Web Design Product Landing Page

So it says I need to have the navbar always at the top of the viewport. This is my code. It works. The navbar is at the top of the viewport even when I scroll down. I am aware the code is quite messy right now, I was planning to optimise it once I pass all the tests. I have been going through other posts on this topic and used the code they suggested but it just doesn’t work.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>The New and Improved Bob</title>
    <link rel="stylesheet" href="styles.css">
    <link
      rel="stylesheet"
      href="https://use.fontawesome.com/releases/v5.8.2/css/all.css"
    />
  </head>
  <body>
    <header id="header">
      <img src="https://upload.wikimedia.org/wikipedia/commons/c/c0/MrBeanLogo.png" 
      class="logo" id="header-img" alt="Mr Bean Logo" loading="lazy">
      <h4 class="sr-only">Mr Bean Logo</h4>
      <div class="top">
         <div class="social-icons">
          <a href="https://www.facebook.com/freecodecamp/">
            <i class="fab fa-facebook-f"></i>
          </a>
          <a href="https://twitter.com/freecodecamp/">
            <i class="fab fa-twitter"></i>
          </a>
          <a href="https://instagram.com/freecodecamp">
            <i class="fab fa-instagram"></i>
          </a>
          <a href="https://www.linkedin.com/school/free-code-camp/">
            <i class="fab fa-linkedin-in"></i>
          </a>
          <a href="https://www.youtube.com/freecodecamp">
            <i class="fab fa-youtube"></i>
          </a>
        </div>
      <nav id="nav-bar">
        <ul class="nav-top">
          <li>
            <a href="#eyebrows" class="nav-link">Eyebrows</a>
            </li>
          <li><a href="#bob" class="nav-link">Bob</a>
          </li>
          <li>
            <a href="#car" class="nav-link">Mr Bean's Car</a>
            </li>
          </ul>
        </nav>
        </div>
      </header>
      <div class="divider"></div>
      <h1 id="eyebrows" class="header">The Eyebrows</h1>
      <p>Lorum ipsum dol amor</p>
      <div class="divider"></div>
      <iframe id="video" width="560" height="315" src="https://www.youtube.com/embed/FItHgP_l234" title="YouTube video player" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
      <h4 class="sr-only">A video of Mr Bean as Palpatine from Star Wars</h4>
      <div class="divider"></div>
      <h1 id="bob" class="header">Bob</h1>
      <p>Bob is important</p>
      <h3 class="list-title">Why Bob is Important</h3>
      <ul class="importance">
        <li class="bob-list">
          <h5 class="list-heading"></h5>
          <p class="list-info"></p>
          </li>
          <li class="bob-list">
          <h5 class="list-heading"></h5>
          <p class="list-info"></p>
          </li>
          <li class="bob-list">
          <h5 class="list-heading"></h5>
          <p class="list-info"></p>
          </li>
          <li class="bob-list">
          <h5 class="list-heading"></h5>
          <p class="list-info"></p>
          </li>
          <li class="bob-list">
          <h5 class="list-heading"></h5>
          <p class="list-info"></p>
          </li>
          <li class="bob-list">
          <h5 class="list-heading"></h5>
          <p class="list-info"></p>
          </li>
          </ul>
      <div class="divider"></div>
      <h1 class="header" id="car">Mr Bean's Car</h1>
      <figure>
      <img src="https://miro.medium.com/max/600/0*m25TkBm7mFCXu0W3" id="car-pic" alt="a picture of a green mini">
      <figcaption>This is Mr Bean's Car</figcaption>
      </figure>
      <div class="divider-2"></div>
      <div class="email-div">
      <h6>Input your email to recieve regular emails about Mr Bean</h6>
      <form action="https://www.freecodecamp.com/email-submit" id="form">
        <input placeholder="bob@beanmail.com" id="email" type="email" name="email" />
        <input id="submit" type="submit" />
        </form>
        </div>
      <div class="divider"></div>
      <h1 id="Gallery" class="header">Gallery of Bean</h1>
      <div class="gallery">
        <img src="https://i.pinimg.com/originals/80/4c/8b/804c8bdde0d0e0e35cdab13f7afee26a.jpg">
        <img src="https://sayingimages.com/wp-content/uploads/when-youve-been-playing-pokemon-go-mr-bean-meme.jpg">
        <img src="https://images3.memedroid.com/images/UPLOADED416/5ebcb36244e60.jpeg">
        <img src="https://i.redd.it/duu3k03jg5o31.jpg">
        <img src="https://cdn.memes.com/up/78498541622727283/i/1622961577506.jpg">
        <img src="https://e7.pngegg.com/pngimages/786/531/png-clipart-rage-comic-internet-meme-joke-humour-mr-bean-miscellaneous-white.png">
        </div>
  </body>
  <div class="bottom">
  <footer class="address">
    <h3 class="footer-title">Bob (Mr Bean)</h3>
    <p class="footer-info">12 Bob street, New Bobland</p>
  </footer>
  </div>
</html>
:root {
  --div-color1: rgb(210, 150, 100);
  --div-color2: rgb(120, 12, 140); 
}
html {
  background-color: rgb(60, 70, 90);
}
.logo {
  width: 100%;
  padding-bottom: 20px;
  margin-top: 100px;
}
i {
  padding: 12px;
  color: white;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  border: 2px solid white;
  margin-bottom: 5px;
}
a {
  text-decoration: none;
}
.top {
  background: orangered;
  width: 100%;
  border: 5px solid red;
}
#nav-bar{
position: fixed;
top: 0;
width: 100%;
background-color: red;
}
.nav-top {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
li {
  padding: 15px;
  list-style: none;
}
.nav-link:first-of-type {
  margin-left: -20px
}
.nav-link {
  border: 5px solid orange;
  padding: 3px;
  color: darkgray;
}
.nav-link:hover {
  background-color: gray;
  border-color: blue;
  border-radius: 3px;
  color: orange;
}
1 Like

Note you can’t have stuff outside the body, put it all inside the body

Oh yeah whoops. Thanks for that.

I rewrote the whole thing and now it works :man_shrugging: