Only one link in nav bar appears

[gtrman97]

https://codepen.io/gtrman97/pen/eYBQMwE

The first two are cut off.

[Lewis2]

The position:fixed; and the top: 0; left: 0; which is in the #navbar li rule moves the links up above the screen.

If you remove or alter those, you’ll be fine

[gtrman97]

But I did that exact same thing with this project and that didn’t happen.

https://codepen.io/gtrman97/pen/jOVpzLw

[Lewis2]

I changed your code a little. Check it out, If you have any questions, just ask me!

HTML

  <ul>
    <li><a href="#p1" class="nav-link">Project 1</a></li>
    <li><a href="#p2" class="nav-link">Project 2</a></li>
    <li><a href="#p3" class="nav-link">Project 3</a></li>
  </ul>
</nav>
<header id="welcome-section">
  <h1>Welcome!</h1>
  <h1>My Portfolio</h1>
</header>
<div id="projects">
  <h2 class="project-tile" id="p1">Project 1</h2>
    <a href="https://github.com/gtrman97/Website">Project 1</a>
  <h2 class="project-tile" id="p2">Project 2</h2>
  <a href="https://github.com/gtrman97/postfix/blob/master/postfix.cpp">Project 2</a>
  <h2 class="project-tile" id="p3">Project 3</h2>
  <a href="https://github.com/gtrman97/Slot-Machine/blob/master/Andrew%20Killian%20SlotMachine.py"> Project 3</a>
</div>
<a href="https://github.com/gtrman97" id="profile-link" target="_blank">GitHub</a> ```

CSS 

```html {
  scroll-behavior: smooth; 
} 
body {
  background: linear-gradient(525deg, red, tomato); 
}
#navbar li {
  display:inline;
  width: 100%; 
  padding: 12px;
}

@media (min-width: 600px) {
  body {
    text-align: center; 
  }
} ```

[gtrman97]

So basically you just moved the nav bar code above the welcome headings.

But won’t that mess with these two tasks for the project?

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

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

[Lewis2]

When they say the height of the welcome section, they mean something like this:

Ignore the nav bar at the top, but the part of the page where the picture of the iPhone and the text written, “It’s a leap year”, that’s a welcome section. You see that there’s nothing else? No text, nothing, just that. They made their welcome-section be the height of the viewport.

And for the navbar, set it to position:fixed but first try that without putting the top: 0; and the left: 0; stuff which you had put before.