I keep trying, it looks ok to me, but the test don’t recognize my navbar
Welcome to the forum!
We need to see your code in order to help you.
https://codepen.io/pedrowldmbrg/pen/vYRobGL this is the codepen, please if possible, I am excited to start my js study
Hello~!
Alright, this is a fun but weird issue. Let’s start by taking a look at the tests that run:
(async () => {
const timeout = (milliseconds) => new Promise((resolve) => setTimeout(resolve, milliseconds));
const navbar = document.getElementById('navbar');
assert.approximately(
navbar?.getBoundingClientRect().top,
0,
15,
"Navbar's parent should be body and it should be at the top of " +
'the viewport '
);
window.scroll(0, 500);
await timeout(1);
assert.approximately(
navbar?.getBoundingClientRect().top,
0,
15,
'Navbar should be at the top of the viewport even after ' +
'scrolling '
);
window.scroll(0, 0);
})();
This might not make much sense to you, if you aren’t familiar with JavaScript yet. But to put it into plain text, the test looks for your element with the id
set to navbar
, checks that it is no more than 15px from the top of the window, scrolls the window down, and checks that it is still no more than 15px from the top.
The challenge here, then, is what is your navbar
? If we look at your HTML, we see:
<header>
<div class="logo">
<h1 class="brand"></h1>
</div>
<nav id="navbar">
<ul>
<li><a class="nav-link" href="#welcome-section">About</a></li>
<li><a class="nav-link" href="#projects">Projects</a></li>
<li><a class="nav-link" href="#contact">Contact</a></li>
</ul>
</nav>
</header>
Your navbar
element is nested within your header
. But in your CSS, you give your header
a minimum height of 75px and you align the items in the centre.
header {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
position: fixed;
min-height: 75px;
padding: 0px 20px;
background-color: #03547D;
color: white;
padding-left: 20px;
}
The gotcha here is that your navbar is not at the top of the window:
It’s in the middle of your header. So the tests are seeing it as too far down and failing.
even tho my navbar is fixed in the top of the Viewport, the challenge do not accept the last topic, this is the code pen: https://codepen.io/pedrowldmbrg/pen/vYRobGL
Challenge: Personal Portfolio Webpage - Build a Personal Portfolio Webpage
Link to the challenge:
I think you already received some feedback about this project in the another thread of yours.
Please do not create duplicate topics about the same issue.
ty very much for your help
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.