Landing page .nav-link anchor link to further down page failing user story test


I’m getting an error when running the test on here for user story #5: When I click a .nav-link button in the nav element, I am taken to the corresponding section of the landing page.

A quick search showed me others who have had this error, though it seems in most cases that they weren’t correctly linked to an ID on the page. As far as I can see, I’ve done that correctly, but it is still failing.

Can anyone offer any suggestions?

Edit: I did notice that the closing tags for the li and a elements in my nav were backwards. Fixed them, but the test still fails.

Here are some things that might be of help
1: what is a header and where does it end? You seem to have several elements that you tried to close incorectly.
2: I can find a nav bar but not a .nav
3: what is this?


4: check your CSS there not all properly linked some tags need a . or a hash before them

  1. A header is a semantic div, it appears to me to be closed correctly. I’m unsure what other elements you’re seeing that aren’t closed, can you be more specific?
  2. There is no .nav . There is a element with a class of .nav-bar, and the list items within the ul in the nav are class .nav-link .
  3. That is a CSS reset.
  4. Can you be more specific? I’m not seeing anything that doesn’t have the proper selector.

1: In codepen there is an option to show all errors in your code. The header close tag gave one as well as several others. I can be more speciek but, i rather have you to learn yourself how to spot errors and fix them in your own code.
2: The thing not passing is : 5. When I click a .nav-link button in the nav element, I am taken to the corresponding section of the landing page.’ This doesn’t pass for a reason what reason could that be? If you want to pass the test you need to follow up the instructions accordingly.
3: Good to know :3 alway’s fun to learn something new.
4: Well what does happen when you change that selector? Do you see any change in appearance? Did you check them all?

the test not passing is

`5. When I click a .nav-link button in the nav element, I am taken to the corresponding section of the landing page.’

below it there is a code block with the errors detail, the first two lines often show the reason of why t is failing.
Right now there is written:

Each .nav-link element should have an href attribute

can you figure out what the issue is from here?

  1. The only errors coming back in the HTML is that I need double quotes on stuff in the head section. I assume the errors you may have seen earlier were the improperly ordered anchor and list item tags in my nav ul (which I’ve since corrected), but I’ve seen no errors for the header and haven’t changed it at all so I’m unsure what you’re seeing.

  2. This is not helpful feedback. I’ve come here having researched the issue having come up for others, and still not found the answer. I can see that the test that is failing is #5, I can also see what their error message says (that’s how I know what to ask for help for). I’m here seeking help because I don’t understand the error, so this comment does not help as it is cryptic and unspecific.

  3. You’re welcome! It gives you a consistent starting place by resetting the default behaviours across browsers.

  4. See number 2. I stated in my reply that I am not finding any incorrect selectors in my CSS, so I’m sure you can understand how asking if I changed “that” selector is unhelpful and unspecific.

You know what, yes, I can.

I’m going to attribute this to two things: 1) you’ve taken that out and presented it in a different context for me
2) Sometimes you just have to sleep on it and it looks obvious later.

Thank you for taking that out of its original context for me. I read it many times, but I was thinking about it backwards. For some reason when I read it in the actual error code, I was thinking it was wanting me to put an href attribute on my li elements rather than moving the class to the anchor instead. Seems obvious now.


1 Like

awesome! Happy coding!