Portfolio page-story-7 Nav failing to link

Hi
Need help on the Personal Portfolio page user story #7

“The navbar should contain at least one link that I can click on to navigate to different sections of the page.”

I can’t find why it’s not working , links are there , got their ID’s etc etc.
Even thought there was not enough filler text to make the page scroll, added that but that also didn’t work.
I think the problem is within the CSS maybe, when i removed all CSS story#7 passed the test.
But i can’t see what and where the problem is and how to fix it.
Please help me , i’m becoming insane :rofl: .

([https://codepen.io/tiberiusrc/pen/yLNgvRb )

There’s a couple of things that we need to look at in order to solve this.

  • When coding with codepen it already creates the basic HTML as seen below. So I would recommend that you remove the <body> tags, <html> tags, and <head> tags from your project. If you look within the codepen project settings, that will allow you to put the information that you would put into the <head> into the project.
<html>
  <head>
  </head>
  <body>
  </body>
</html>

So looking at the error, it is saying

The navbar should always be at the top of the viewport

This should be interpreted as

If I am at the bottom of the page, I should still be able to see the navbar

I’ll leave you a nice little hint. Your solution can be found with the position property. I’ve attached the link. Read it and see if you can find the solution!
https://www.w3schools.com/cssref/pr_class_position.asp

I didn’t realize that codepen creates the basic html> thx for that. :+1: :sunglasses:

But the problem with the navbar isn’t the viewport , but the linking part .
It won’t pass the link test.

““User Story #7: The navbar should contain at least one link that I can click on to navigate to different sections of the page.””

I just can’t see where that problem is. :worried:

@tiberiusRC You have a lot going on with this webpage so I’m not sure exactly what it was having problems with.

So, to get past the issue with #7, my workaround has been to remove the <div class="center"> Make sure to get rid of the closing tag as well!

Next, you have a styling of overflow: hidden; in your body. Remove that styling.

Follow both of those and you should still get 11/12 of the tests correct. See if you can solve it from there!! Your error shouldn’t be #7 after that.

@caleb-mabry
Thanks alot with your tips , i’ve finally got it passing correctly.

I was just not seeing it (was getting sleepy :sweat_smile:).
:sunglasses: :+1:

1 Like