Nav Link Test Fail

HTML-CSS
1

Tell us what’s happening:
When i open the website, the nav bar links link to their sections of the page, but the test keeps failing it. it says " each .nav-link element should have an href attribute: expected false to equal true"

Had to take out most of the code to post it, but each section has a corresponding id and it functions as it should when opened in browser.

Your code so far

<body>
    <header id="header">

        <nav id="nav-bar">
            <ul>
                <a href="#features"></a><li class="nav-link">Features</li></a>
                <a href="#film"><li class="nav-link">Media</li></a>

            </ul>
        </nav>

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/14.0 Safari/605.1.15.

Challenge: Build a Product Landing Page

Link to the challenge:

2

Without seeing the original code and being able to be sure, but I think the problem might be here:

<a href="#film"><li class="nav-link">Media</li></a>

Why is the anchor surround the li instead of the other way around? That might be screwing up the test because it looks in the element that has .nav-link and can’t find the href - I’m not sure if it has to be on the element or a child, but parent wouldn’t work. You might be able to move that class to the anchor, or you may need to invert the order, or both.

3

i originally had it reversed so it was (li a ) but tried this to make the whole (li) a clickable link to see if it works but it didn’t. how would you write the href inside the (li) bracket? would it be li class=“nav-link” href= etc or do you need an a in there

https://codepen.io/freeCodeCamp/pen/MJjpwO

4

You should just be able to past the link into your reply. In any case, I assume that it is this.

5

no i got it up. when i was explaining what i wrote it took it as links, so i fixed it and now you can grab the link

6

nope link went to blank page lol ill fix it

7

https://codepen.io/patmcibass/pen/poEGOxM

8

As I was guessing before, it appears that that “nav-link” class needs to be on the link itself, not the li. When I move them to the anchor, it passes for me.

1 Like
9

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