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

Hi, I can’t pass the Product Landing Page, I don’t understand where I’m wrong about nav-link button, this is the code,
https://codepen.io/AnneJuly/pen/MqxzXR

Hi there.
Nice work. You’re almost done.
Do you remember how do anchor links work? Why you click on it you move throught the page to the element which installed within href tab with # at start.

And at your code you have 3 anchor links but you don’t have any section where they can send you.

Another word you have to have an anchor link with attribute href with the value of the identifier of the section where you want to go. :wink: Sorry for entanglement. I hope you got it.

3 Likes

Thanks, I’ll try, but I’m not sure.

Think about anchor links as train tickets. You can buy tickets only when there is a place where you can to go. But if you buy a ticket which doesn’t have a destination name or has nonexistent name of destionation how can you use this ticket? In no way.

So the deal with the anchor links is they work the same way. You defined a link with a ticket #somewhere, but you don’t have an html item with id=“somewhere”. That’s why nothing happens when you click on the link.

7 Likes

Hi, Anne. When I run the tests, your code is failing just one. The error message is this:

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

Right now, the three links in your nav have the following href values: ‘#’, ‘#mugset’, and ‘#customize’. For these links to work, there need to be elements on the page that have ids that match those hrefs. For example, if you add a <div> at the bottom of the page and give it an id of ‘mugset’, then when you click the mugset link in the nav, the page should jump down to that div.

If you set up that relationship between your three <a> tags and three other elements on the page, then I believe you should pass the tests.

Also note that your first href, ‘#’ won’t go anywhere right now. Add some text after the pound sign, like ‘#coffeemug’, or whatever you want.

Good luck.

2 Likes

Thank you, It’s ok now! :slight_smile:

I’ve done now, thank you :slight_smile:

Maybe this can help someone if still having trouble…

I had a very similar issue, but my reason was because I had the .nav-link class on the li tags opposed to the a tags in my navbar

18 Likes

man. had the same problem. I wish the instructions were a little more explicit as both methods worked but only one was expected by the algorithm

@CoderJones91 Thank you that was exactly my issue!! i went over this soooo many times!!!Thank you !!!

1 Like

I am having the same problem. please tell me how to solve it.
here my code:

Welcome, naga.

In general, it would be better for you to open your own post. In your case, the tests all pass…

im having the same problem, I did however linked the nav bar, but somehow i dont pass the test
here’s my link:
https://codepen.io/RickyLeaks/pen/oNjdKVP?editors=1100

1 Like

Hey @rickyleaks,

  • Next time, don’t be afraid to create a new topic for questions like this instead of invading other topics.

  • The problem is that you wrapped your anchor tag <a> inside your list. That’s not the way to go on making a nav bar. You usually want the <a> tag wrapping the <li>/ content of the navbar. This is causing the test to not be able to find the right nav

3 Likes

hi @Catalactics,

thanks very much for your response.

Sorry about getting in other messages, i thought that it would have been a good idea to talk about the same thing inside of an already existing topic instead of creating new topic for the same issue

1 Like

awww so that’s why! I’ve been going crazy for the last hour

Hi . I am stuck on this issue. I’ve been trying to figure it out - I think my brain is tired. lol… I would appreciate it if someone could help:

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

1 Like