How do I make the navbar to be at the top of the viewport?

HTML-CSS
1

Im currently doing the Responsive web Design certification, and I’m stuck in the 4th and 5th project because of the navbar requirement.

The code:

<body>

  <nav id="navbar">
    <a href="#welcome-section">Welcome</a>
    <a href="#projects">Projects</a>
  </nav>


  <section id="welcome-section">
    <h1>Hello, I'm Anonymous</h1>
  </section>


#navbar {
  position: fixed;
  top: 0;
  left: 0;

}

@media (max-width: 600px) {
  footer {
    color:black;
  }
 
}
1 Like
2

please share all your code and a link to the project on freecodecamp

1 Like
3 
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <title>Personal Portfolio</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>

  <nav id="navbar">
    <a href="#welcome-section">Welcome</a>
    <a href="#projects">Projects</a>
  </nav>


  <section id="welcome-section">
    <h1>Hello, I'm Anonymous</h1>
  </section>

  <section id="projects">
    <h2>My Projects</h2>
    <a class="project-tile" href="https://example.com" target="_blank">Example Project</a>
  </section>

  <footer>
    <a id="profile-link" href="https://github.com" target="_blank">My GitHub</a>
  </footer>
</body>
</html>




#navbar {
  position: fixed;
  top: 0;
  left: 0;

}

@media (max-width: 600px) {
  footer {
    color:black;
  }
 
}
4

what do you think about this way?

code removed by moderator

5

ask for help in your own topic, not in someone else’s topic

1 Like
6

please share the link to the project on freecodecamp

1 Like
7

understood completely !!

8

Hi buddy, here could you help us out on which part of your code are you feeling stuck ??

And what is the link of your code ?

What is the exact problem are you facing here ?

9

The problem is the required “12. Your #navbar element should always be at the top of the viewport.” is the only task that keeps failing and I can’t see whats wrong there

10

if you can please link the challenge on the freecodecamp site, that would make it easier to double check what’s going on