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

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

#1

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


#2

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

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


#4

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.


#5

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.


#6

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


#7

I’ve done now, thank you :slight_smile: