Nav link button

Nav link button
0

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.

Replace what you have with this.

#header {
  position: fixed;
  top: 0;
  width: 100%;
}
.topnav {
  position: fixed;
  top:0;
  right:0;
}

Your opening tags on the section elements are not closed correctly.

You have this:

<section id="features"</section>

They should to look like this

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

And you are still not using them like you should. Each of the sections should be a parent for the content for each part of the page.

So you would wrap the page content like this:

<section id="features">
  <h1 class="heading">The Google Pixel 3a.</h1>
  ...rest of content until
  <img class="center-fit" id="phoneimage" src="https://designketchup.com/wp-content/uploads/2018/11/pixel_3_xl-1024x768.jpg" width="1800" alt="googlepixel3apic"/>
</section>

<section id="tech">
  <h2>The camera that does the work for you.</h2>
  ...rest of content until
  <img id="googlepixel3aimg" src="https://www.unboxingtreatment.com/wp-content/uploads/2019/05/Google-Pixel-3a.jpg" width="1800" alt="googlepixel3aimg" />
</section>

<section id="buy">
  <h2>Peace of mind built in.</h2>
  ...rest of content until
  <p>Automatic security and OS updates will make sure that your phone is protected against the latest threats.</p>
</section>

<section id="contact">
  <form id="form" action="https://www.freecodecamp.com/email-submit">
  ...rest of content until the end of page
</section>

@Iasjorg thank you, I have tried this:

#header {
  position: fixed;
  top: 0;
  width: 100%;
}
.topnav {
  position: fixed;
  top:0;
  right:0;
}

But how do I set it so that it stays on the right side not to the left please?

@Iasjorg I have managed to do this and make it stay to the right:

#header {
position: fixed right;
top: 0;
width: 100%;
}

.topnav {
  position: fixed;
  top:0;
  right:0;
}

This is what I did I positioned the #header fixed right, and kept the rest the same, but its still not passing the test.

try also using the Analyze HTML instrument given by CodePen, you have a pletora of errors:

HTML Options
HTML Inspector warnings:
The 'alt' attribute is required for <img> elements.
'<' is not a valid attribute of the <img> element.
'div' is not a valid attribute of the <img> element.
'<' is not a valid attribute of the <section> element.
'section' is not a valid attribute of the <section> element.
'<' is not a valid attribute of the <section> element.
'section' is not a valid attribute of the <section> element.
'<' is not a valid attribute of the <section> element.
'section' is not a valid attribute of the <section> element.
'<' is not a valid attribute of the <section> element.
'section' is not a valid attribute of the <section> element.
<style> elements inside <body> must contain the 'scoped' attribute.
The <center> element is obsolete and should not be used.
The <center> element is obsolete and should not be used.
':allowfullscreen' is not a valid attribute of the <iframe> element.
'allow' is not a valid attribute of the <iframe> element.
The 'frameborder' attribute is no longer valid on the <iframe> element and should not be used.
The <center> element is obsolete and should not be used.
The 'alt' attribute is required for <img> elements.
'googlepixel3apic"' is not a valid attribute of the <img> element.
The <center> element is obsolete and should not be used.
The <center> element is obsolete and should not be used.

for CSS at one point you have this line: border: 2px; #585757;;

@ieahleen thank you, still cant pass the test on this:

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

Here is my code: https://codepen.io/LauS1020/pen/ZdZXRX

I cant find what I need to add or delete.

Have you tried making sure all the css and html pass the validator? Sometimes it is also that

Whats the validator please? I just run the test and it passes all just not the the navbar should always be at the top of the viewport, but not sure ws the validator is how do I do that please? Thank you.

There is an arrow in the html box in code pen, click there and chose “html analyser” it will give you the error list I posted above

Your html is a bit of a mess: this doesn’t have sense:

</body>
  </html>
</header>

This is not valid CSS position: fixed right; it is breaking the fixed position, which means you fail the test for the fixed nav.

You can replace all of this CSS…

#header {
position: fixed right;
top: 0;
width: 100%;
}

nav-bar {
  position: fixed
    */top; 
}

.topnav {
  position: absolute;
  top:0;
  right:0;
}

.topnav {
  background-color: ;
  overflow: hidden;
}

…with the CSS I already posted. If you do it correctly the nav will be placed on the right side and you will pass the test.

You really do need to fix your HTML, you still didn’t fix the issues I pointed out.