Build a Product Landing Page Bugged?

Code Feedback
1

hi so im 15/16 on tasks the one which isnt passing is
User Story #13: The navbar should always be at the top of the viewport.
as far as im aware ive done that but it isnt passing.

My CodePen: https://codepen.io/aoc1985/pen/qGJJNQ

on a sidetopic my grid seems to center differnt parts of the grid differntly why is this and any commands i could play with to try make it all more centered many thanks

Link to the challenge:
https://learn.freecodecamp.org/responsive-web-design/responsive-web-design-projects/build-a-product-landing-page/

2

Hi!

Have you checked your error message?
Your header is not set to be fixed at the top. Therefore, you should add the following in your CSS:

#header{
  position: fixed;
  top: 0;
}

Hope this helps!
Cheers.

3

hi! thanks for the responce yea i did notice the message however i dont want to fix the rest of my header elements to follow the page also it does say it just needs the header or one of its children in this case the id i have for my nav bar which is a child of the header id. also i just added that code to header and it still says 15/16 :frowning:

4

I’d suggest using bootstrap on this project. It makes using and understanding the navbar easier.

To get things to pass the tests and still look similar to what you have going on I rearranged things in your header tag:

<header id="header">
    <nav id="nav-bar">
      <h1 id="hed"> Product Header</h1>
      <img id="header-img" src="https://i.dell.com/sites/imagecontent/metadata/PublishingImages/Services2.jpg">
      <ul id="nav-flex">
        <li><a class="nav-link" href="#top">Top</a></li>
        <li><a class="nav-link" href="#email">Middle</a></li>
        <li><a class="nav-link" href="#video">Bottom</a></li>
      </ul>
    </nav>
  </header>
5

@saclark12000, at this point in the lessons for Responsive Web Design, campers have not been introduced to Bootstrap.
If the lessons are taken in order, Bootstrap will be introduced in ‘Front End Libraries Cert’ which comes after JavaScript.

1 Like
6

hi thanks but i copied that in over the same part and im still getting 15/16 and im really confused cause i dont get why my own code doesnt pass as correct should i just make the page look tottaly horrible and fix all the header to the top of the page?

7

I think I found the root of all evil.

In the tests, it says the navbar or one of it children should be at the top. After checking, I see that you have an image in the navbar but the image itself is not fixed to the navbar. Make it so that when you scroll it remains in the navbar. That could be the issue as that is the only child that is not at the top. Try that.

8

hey thanks yea i did it by deleting the image src and header text and putting them above with seprate tag/ids and then changing my css which fixed the nav bar to fix the whole of the id header and now it passes. lil silly but w/e done now!

9

Way to go, glad you got it figured out!