Need Help regarding the Protfolio Page automated tests

[atharvapai]

Hello

I am trying to complete the last project of responsive webdesign and am stuck on one bit.

I have a navigation with the following code –

HTML–>

<header>
  <nav id="navbar">
    <ul>
      <li><a aria-label="Go to About Section" href="#welcome-section"><span>About</span></a></li>
      <li><a aria-label="Go to Projects Section" href="#projects"><span>My Projects</span></a></li>
      <li><a aria-label="Go to Contacts Section" href="#contact"><span>Contact Me</span></a></li>
    </ul>
  </nav>
</header>

CSS →

header {
  background: var(--header_color);
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100%;
  z-index: 1;
  padding: 10px;
  display: flex;
}

nav {
  height: max-content;
  flex-grow: 1;
}

nav ul {
  display: flex;
  gap: 10px;
  height: 100%;
  padding: 0px;
  margin: 0px;
  justify-content: space-between;
}

nav ul li {
  list-style: none;
  flex-grow: 1;
}

header nav ul li a {
  display: inline-block;
  height: 100%;
  background-color: var(--blue);
  padding: 10px;
  color: white;
  font-family: "Amatic SC", cursive;
  display: flex;
  justify-content: center;
  font-size: 26px;
}

When I run the test for the project it doesn’t qualify the 7th condition and gives the following error –

7. The navbar should contain at least one link that I can click on to navigate to different sections of the page.
   At least one navbar link should move the page position when clicked : expected false to be true AssertionError: At least one navbar link should move the page position when clicked : expected false to be true at o.

But as you can see that I have a link in my nav which takes me to different parts of the project, the code even goes up and down my page 3 to 4 times before giving the error.

This is fixed when I remove the header and just keep the nav but then it fails at 3rd condition of the layout.

3. The navbar should always be at the top of the viewport.
   Navbar’s parent should be body and it should be at the top of the viewport : expected -18 to be close to 0 +/- 15 AssertionError: Navbar’s parent should be body and it should be at the top of the viewport : expected -18 to be close to 0 +/- 15 at Proxy.
   If I add position fixed to the nav element to fix this error the first error occurs again.

Please help me with this, I have even tried just copy-pasting FCC’s code to test but even that gives the first error.

How can I solve this?

Link to the portfolio - On github or on codepen

Any help is appreciated, Thank you very much for taking the time to read this

[dlaub3]

This is a difficult thing to debug because you don’t have visibility into why it is failing. You could try finding and reading the code for the test and see if that helps you understand why the test is failing. But as a first step it may be helpful to carefully compare your solution with a known working solution do identify an differences. You could try changing a working solution to be more like your solution and see if you can break it in the same way. That will help you diagnose the problem. Developing skills and strategies for debugging these types of problems is a crucial part of being a developer so don’t view this as wasted time. It’s valuable learning.