Build a Personal Portfolio - Build a Personal Portfolio

HTML-CSS
1

Tell us what’s happening:

I have problem, with test 12:
Your #navbar element should always be at the top of viewport.

But I fixed it at the top, and don get what problem, thank you!!!

Your code so far

<!-- file: index.html -->
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Personal Portfolio</title>
    <link rel="stylesheet" href="./styles.css">
  </head>
  <body>
    <nav id="navbar">
      <ul>
        <li><a href="#profile-link">My projects</a></li>
      </ul>
    </nav>
    <section id="welcome-section">
      <h1>Welcome on my page</h2>
    </section>
    <section id="project-section">
      <div class="project-tile">
        <h2>First project</h2>
        <a id="profile-link" href="https://codepen.io/freeCodeCamp/full/zNqgVx" target="_blank">My project</a>
      </div>
    </section>
    
  </body>
</html>

/* file: styles.css */
* {
  text-align: center;
  justify-content: center;
  align-items: center;
  background-color: rgb(179, 255, 255);
}

h1 {
  font-family: Algerian, arial, sans-serif;
  font-size: 32px;
}
#welcome-section {
  padding-top: 100px
}
#navbar {
  display: fixed;
  position: fixed;
  top: 0;
  left: 0;

}
@media (max-width: 1600px) {
  #navbar {
    position: absolute;
    top: 0;
    left: 0;
  }
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/135.0.0.0 Safari/537.36

Challenge Information:

Build a Personal Portfolio - Build a Personal Portfolio

2

Which one makes it fixed?

3

I did mistake, display flex position fixed, I tried just display: flex or just positision:fixed and its dont work

4

When you scroll down, does your navbar stay fixed at the top?

Try experimenting with your window size.

5

I’m done thank you very much!

1 Like