Lost cause will this title work?

I don’t understand what I am doing wrong to not pass the challenge. I have been on these challenges a month or so and it’s just not enough explanation to understand this for me. Maybe I’m just a F ing moron here LOL I just wish it would explain more. I have google these two things and everything leads me back to FFC with more crap I don’t understand.

2. The height of the welcome section should be equal to the height of the viewport.

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

I don’t want to give up but I feel like i keep running into road blocks here.

For the navbar you will have to set the position to fixed like this.

#navbar {
 position: fixed;

As for the welcome section , you could try setting the height to 100 vh like this

#welcome-section {
  height: 100vh;
  text-align: center;

Also I noticed that none of your navigation links go to other sections on the page. You have a nav link called contact but there is no contact section.

If you do this instead then it will work.

<!--This is the nav link for the contact section-->
<a href="#contact">Contact</a>

<!--This is the contact section -->
 <h2>Let's talk</h2>
  <div id="contact">
      <!--This is where you can have links to your github or FCC profile,
fake phone number, fake email, fake facebook page or whatever.-->

Hope that helps!

Happy coding!


@chrissport21 For #2 set the height of the welcome section to 100vh. For #3 you’ll want the #navbar position to be set to fixed. Both of these would be completed in your CSS code.

1 Like

You can also use :

.header {
   position: sticky;
   top: 0;

It is very important to set position definition, for example:

top: 0;

or you can make your nav stick to the buttom.

buttom: 0; 
1 Like

Thanks but i still can’t get it to pass green. first it shows all pass then it doesn’t. I’m still kinda confused as I thought it was saying if I click on say Contact in the navbar it should be able to go to the bottom of the page. I feel something is missing> I just don’t know what to add to make it go to the bottom of the page. https://codepen.io/Chris9840/pen/ExKJVQz?editors=0100

You have a duplicate id=“contact”. Remember that ids are unique and can only be used once. If you look at my previous reply you will see that I do not have duplicate ids.

<a href="#contact" id="contact">Contact</a>

if you click on this element, it will bring to the element with id of contact… which is this one - that’s the reason your elements do not move

remember that you can have an id only once, you can’t have multiple elements with same id