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: