Nav link button

Hi, when I run the test your code, it is failing and this is the error message:

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

This is my code:

pngc

Can some please me I am not sure whats missing from the code? Thanks

Could it be that the test is looking for button elements and not a tags?

Oh okay maybe so would I need get rid of

<a> tags?

It’s hard for me to be sure without playing with the code myself or seeing the whole file and I’m not sure what challenge this is.

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

maybe try <button class="nav-link"><a href.....></a></button>?

It seems odd for the test to name a button class nav-link, I would have thought a class nav-button would be more appropriate.

Its for the product landing page challenge,

<nav id="nav-bar">
   class="button">
  <div class="topnav">
  <button class="nav-link" "rules" href="#features">Features</a>
  <button class="nav-link" href="#tech-specs">Tech Specs</a>
     <button class="nav-link" href="#buy">Buy</a>
     <button class="nav-link" href="#contact-us">Contact Us</a>
   </div>
     </nav>

Is this what you mean?

this won’t be valid for a few reasons:

 <button class="nav-link" "rules" href="#features">Features</a>
  • the opening tag is a button but the closing tag is an a tag
  • the “rules” aren’t assigned to an html attribute (did you mean class="nav-link rules"?)
  • the href attribute is for a elements, not button elements

this article should be useful - How to Create a Button like a Link

I have tried this but its still not working, is there away for me to show you the whole file please? thank you.

Could you copy the code in a project on codepen.io ?

They don’t have to be buttons, I would not really suggest using button elements for the nav.

Do you have elements on the page with the corresponding ids on them?

For this link:

<a class="nav-link" href="#features">Features</a>

You need an element with this id:

<section id="features">
</section>

We really do need to see your page to be able to help you, so as suggested make a Codepen page.

@Pagey @lasjorg asjorg I am only free member I can only have one project on their I think, but will try if you go to my profile would you be able to see it there or does it need to be a project? thanks.

You can have as many Codepen “pens” as you want. It can even be anonymous you don’t need a Codepen account.

You can just post the link to the pen in this thread.

Thank you, here is the link to the project
https://codepen.io/LauS1020/pen/NZormm.

That is not the same HTML as what you posted an image of?

Now you are missing the # in front of the href values and they are not using the correct links.

You have:

<div class="topnav">
  <a class="active" href="#features">Features</a>
  <a href="tech-specs">Tech Specs</a>
  <a href="tech-specs">Buy</a>
  <a href="tech-specs">Contact Us</a>
</div>

Should be something like this:

<div class="topnav">
  <a class="active nav-link" href="#features">Features</a>
  <a class="nav-link" href="#tech">Tech Specs</a>
  <a class="nav-link" href="#buy">Buy</a>
  <a class="nav-link" href="#contact">Contact Us</a>
</div>

You are also missing the surrounding <nav> element which the correct id on it. The test that checks the links needs that to be on the page.

And like I said, you need to have elements on the page with ids corresponding to the href values on them (without the #).

<section id="features">
</section>

<section id="tech">
</section>

<section id="buy">
</section>

<section id="contact">
</section>

Thank you,its still not working, this is the updated code: https://codepen.io/LauS1020/pen/ZdZXRX

I have updated code again: https://codepen.io/LauS1020/pen/ZdZXRX
but it is still not working I don’t know why its not, still get these errors:

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

1. The navbar should always be at the top of the viewport.

But I just cant seem to figure out how to fix them.

below the vague test, there is also written the assertion error that say exactly what’s wrong:

The .nav-link with href="#features" is not linked to a corresponding element on the page : expected null to not equal null
AssertionError: The .nav-link with href="#features" is not linked to a corresponding element on the page : expected null to not equal null

Now, go take a look at your #features element and you will find out you have a typo

I managed to fix a few bugs and get all the tests passing. Here are the bugs I found:

  1. the id features was incorrectly spelled as <section id="feautres">, if you change this typo that gets one of the tests to pass
  2. the header needs to be fixed to the top of the screen so that it still shows when scrolling. You therefore need to add this CSS:
header {
  position: fixed; // fix the header
  top: 0; // to the top of the page
  left: 0; // and to the left of the page
  right: 0; // and to the right of the page
}

Both of those changes will get all tests to pass.

Thank you @Pagey I managed to pass this one, When I click a .nav-link button in the nav element, I am taken to the corresponding section of the landing page.’

But its The navbar should always be at the top of the viewport.
if I use the header it move my nav bar to the left but also moves it in to columns, i want it to say at the top right in a row.

  1. After using position: fixed; on the header you can also set that on the nav to keep it’s current position (instead of absolute). You will also have to increase the size of the logo image (to like width: 50%).

  2. You should use the sections to wrap each part of the page they belong to so the links take you to the correct part of the page. That is after all the point of the links being connected to the sections.

  3. You change one of the class on the links to navbar-link it should be nav-link.

  4. You have errors in the HTML. Press the down arrow to the right of the HTML code box and select “Analyze HTML”.

  5. You need to be careful and make sure you are closing the strings surrounding attribute values. You can tell something isn’t right if all the HTML suddenly is colored green. That is the syntax highlighter and green is for Strings.

E.g. you have this:

<img class="center-fit" id="phoneimage" src="https://designketchup.com/wp-content/uploads/2018/11/pixel_3_xl-1024x768.jpg" width="1800 alt="googlepixel3apic"/>

Because width="1800 does not close the string correctly all the HTML following it is highlighted green

It happens again here:

<img id=googlepixel3aimg" src="https://www.unboxingtreatment.com/wp-content/uploads/2019/05/Google-Pixel-3a.jpg" width="1800" alt="googlepixel3aimg" />

id=googlepixel3aimg" is missing the starting string and should be id="googlepixel3aimg"

1 Like

@Iasjorg thank you still not working can you give me a example of what i need to fix or add please? thanks.