#navbar be at the top of the viewport but it doesn't detect it when I run the code

HTML-CSS
1

Tell us what’s happening:

Hello to everybody!

I passed this evaluation by making it simple, I have added more styles but when I run the code it does not detect that the #navbar is set to the top and it’s practically the same configuration, can you help me to see where’s the mistake?

Big thanks!

Your code so far

/*HTML*/
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Portafolio Exercice</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <header>
      <div id="logo">
        <img src="https://wallpapercave.com/wp/wp2406591.jpg" width="200">
        </img>
        </div>
      <nav id="navbar" class="nav">
        <ul class="nav-list">
         <li>
            <a href="#welcome-section">Intro</a>
         </li>
         <li>
            <a href="#projects">Work</a>
         </li>
         <li>
            <a href="#contact">Contact</a>
         </li>
        </ul>
      </nav>
    </header>
/*CSS*/
header {
  background: black;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  position: fixed;
  top: 0;
  min-height: 100px;
  width: 100%;
  justify-content: space-around;
  align-content: center;
  align-items: center;
  color: white;
}

#logo {
  position: relative;
  z-index: 1;
  border: none;
}

nav {
  font-weight: 400;
  z-index: 2;
}

nav > ul {
  width: 80vw;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  list-style-type: disc;
}

li {
  list-style: none;
  display: list-item;
  text-align: -webkit-match-parent;
  font-weight: bold;
  font-size: 22px;
  border-radius: 50px;
  padding: 10px;
}

nav > ul > li:hover {
  background-color: #dfdfe2b1;
  color: #1b1b32;
  cursor: pointer;
}

li > a {
  color: inherit;
  text-decoration: none;
}

The code is too long, I have pasted only the part referred to in the post…

Your browser information:

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

Challenge Information:

Personal Portfolio Webpage - Build a Personal Portfolio Webpage

2

I have solved it =)

The id=“navbar” should be in the < header> not in < nav>

3 Likes
3

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