Personal Portfolio Webpage - The navbar should always be at the top of the viewport

HTML-CSS
1

I’m able to fix my navigation bar at the top but for some reason it isn’t passing the final test.
Anyone able to see what is wrong?

Your code so far

<!-- file: index.html -->
<!DOCTYPE html> 
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name:"viewport" content:"device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="styles.css" />
    <title>Personal Portfolio Webpage</title>
  </head>

  <header>
    <div id="navbar">
      <a href="#welcome-section">Welcome</a>
      <a href="#projects">Projects</a>
      <a>Dummy</a>
    </div>
  </header>
  
  <body>
    <div id="welcome-section">
      <h1>Welcome to my page!</h1>
    </div>
    <div id="projects">
      <img src="" class="project-tile" />
      <a target="_blank" alt="picture to project" id="profile-link" />
    </div>

  </body>

</html>

/* file: styles.css */
* {
  font-family: calibri;
}

#navbar {
  width: 100%;
  background: pink;
  height: 40px;
  position: fixed;
  top: 0px;
  left: 0px;
  padding: 0px;
  display: flex;
  justify-content: space-evenly;
  z-index: 1

}

a {
  text-decoration: none;
  padding: 10px;
  font-size: 20px;
  color: white;
  font-weight: bold;
  background: pink;
}

div {
  position: relative;
  top: 50px;
}

#welcome-section {
  text-align: center;
}

@media screen and (max-width: 500px) {
  #navbar {
    flex-direction: column;
    margin-top: -40px; 
  }

  body {
    margin-top: 80px;
  }
}

Your browser information:

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

Challenge: Personal Portfolio Webpage - Build a Personal Portfolio Webpage

Link to the challenge:

2

why is your body after your header?

visible page starts with body

apparently, if you remove

**top:0 px **

you’re gonna pass the test

I’d also like to mention to you that you should not style divs in css with div element!!!

because in reality you’re gonna have quite a few of them and you cant really style all of different divs the same. divs are styled by applying classes

1 Like
3

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.