Tests not passing on personal portfolio project

The test

The navbar should contain at least one link that I can click on to navigate to different sections of the page.

fails every time, but I cannot understand why because I have 3 links navigating to different sections of the page. I am using a scrolling effect, but it’s just CSS so I don’t think it will be causing it to fail?

I’d welcome any help, if anyone can spot something wrong in my code?

Edit: Link to the project description.

@litlmassive, when a test fails click the red button to see which test(s) are failing and text to help you correct the issue.

  • Be sure and read more than just the first line of the failing message. The ability to read and comprehend error messages is a skill you’ll need to acquire as a developer. Ask questions on what you don’t understand. The failing error message says
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

Looking at your code I see a couple of things that you need to revisit;

  • <navbar id="navbar"> is not a valid HTML tag. <nav id="navbar"> would be the proper tag. (Make sure you close it properly)
  • Once you correct the above, run your HTML code through the W3C validator.
    • There are HTML syntax/coding errors you should be aware of and address. (When I correct the first one that test will pass. However, there will be another test that fails so work on that)
    • Since copy/paste from codepen you can ignore the first warning and first two errors.

Hope that helps.

Hi Roma—I’m having the same problem as litlmassive, but my code is already validating perfectly on the W3C validator (minus the issues due to copy/pasting from CodePen) and the failure message isn’t helping me.

After troubleshooting for a while, I’ve found what DOES work is deleting html, body {overflow: hidden} and main {overflow-y: scroll}, but that messes up the whole page. Any suggestions for how to work around this while still allowing the site to behave how I want it to? And if not, could you at least help me understand why this solution works? Here’s my code.

@litlmassive Either remove html from the html, body group selector so you only target the body, or remove overflow-x: hidden. You then also want to remove height: 100%.

You also need to remove the height: 100% from the html, body selector. You can just remove the selector altogether.

@cutler, the issue is similar it’s true but you should open your own topic so that what’s being told to you does not interfere with the OP.

Thanks all - I have all tests passing now by removing what you suggest.

I am really keen to fully understand what is going on - was this problem caused by how the tests determine whether the page has moved? Or is it because I had designed it so that the page kind of remains stationary and just the content moves?

@litlmassive, codepen and a lot of browsers are forgiving in that they will try and figure out what you want to do and even though the HTML is incorrect they do their best. This is why you were seeing the page move when you clicked on the links.

The tests, I believe, are a little more strict. It was looking for a navbar link. There wasn’t a correct nav element set up and the syntax for the links was incorrect.

The W3C validator is a good tool to have and use.

@litlmassive It’s the type of overflow you are creating that is causing the test to fail.

If you add the properties back to the group selector and also remove margin: 0 you can see the overflow. It is the outer scroll position that the test is looking at (window.scrollY) not the inner scroll.

Not sure this example is terribly useful
https://codepen.io/lasjorg/pen/WNpzRYM

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.