Product Landing Page User Story #13 Won't Pass

I started this project on codepen before the update to the course so all of my code began there. I finished my code and all of the tests passed so I copy-pasted straight to the new editor + linked the stylesheet. However, the test asking the navbar to be at the top of the viewport no longer passes.

Here’s the codepen if it helps: https://codepen.io/Wonderboi/pen/QWaBgzq

Here’s the header/navbar HTML

<header id="header">
    <div class="nav-box" id="nav-p1">
      <nav id="nav-bar">
        <ul id="nav-link-p1">
          <li><a class="nav-link nav-home" href="#home">Home</a></li>
          <li><a class="nav-link nav-him" href="#how-its-made">How It's Made</a></li>
          <li id="nav-ghost"><a class="nav-link" href="#how-its-made"></a></li>
        </ul>
      </nav>
    </div>
    <!-- All of logo-flex is so i can center my makeshift logo
         with text on either side because I don't know how else            to do it :) -->
    <div id="logo-flex">
      <div>
        <p class="comp-name" id="name-p1">WEEB</p>
      </div>
      <div class="head-img-parent">
        <img id="header-img" src="https://pngimg.com/uploads/katana/katana_PNG65.png" alt="katana logo">
        <img id="header-img-2" src="https://pngimg.com/uploads/katana/katana_PNG65.png" alt="katana logo">
      </div>
      <div>
        <p class="comp-name" id="name-p2">FORGE</p>
      </div>
    </div>
    <!-- End Logo HTML -->
    <div class="nav-box" id="nav-p2">
      <nav>
        <ul id="nav-link-p2">
          <li><a class="nav-link nav-types" href="#types">Types</a></li>
          <li><a class="nav-link nav-contact" href="#contact-us">Contact Us</a></li>
        </ul>
      </nav>
    </div>
  </header>

And here’s the CSS I think is part of the problem. I noticed that if i remove position: fixed; and display: flex; from #header the test passes, but it looks horrible. Why it passes is beyond me and I would prefer to avoid redoing my entire header.

#header {
  position: fixed;
  background-color: var(--header);
  top: 0;
  left: 0;
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  align-items: center;
  border-bottom: 1px solid #ccc;
}

ul {
  list-style: none;
}

.nav-box {
  width: 23%;
}

nav > ul {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 90%;
}

.nav-link {
  margin: 0;
  padding: 0;
  border: 3px solid transparent;
  font-size: 1.45rem;
}

Challenge: Build a Product Landing Page

Link to the challenge:

I think you are missing something at the beginning of your index.html
it is usually in the first 10 lines
Take a break and come back later to your code.

edit: sorry, I was looking at the complete wrong code :confused: my mistake.
but I stay at advice to take a break and come back later to your code

Well, you were right to say that. Went through some other code that isn’t shown here and changed a few things. It wasn’t a perfect solution but I’m happy with it, thanks for the advice.

1 Like