Your #navbar element should always be at the top of the viewport.?

Hello. I’ve searched extensively in the forums and on google. I’ve seemingly followed all directions but I cant get it to pass. My header and by extension navbar are fixed to the top of my viewport yet it won’t pass. Please help and thank you in advance.

Here is my code:

<header id="header">
     <div id="header-container">
      <div id="header-logo">
        <img src="https://i.imgur.com/Mjxsx3e.png"></a>
      </div>
     <navbar id="navbar">
      <ul >
        <li><a href="#welcome-section">Hello</a></li>
        <li><a href="#projects-header">Work</a></li>
        <li><a href="#aboutme5">Contact</a> </li>
      </ul>
     </navbar>  
     </div>
   </header>

And my CSS:

  #header-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
    background-color: #1c1d25;
  }

  #header-logo img {
    height: auto;
    width: 80px;
    vertical-align: middle;
    margin: 5px;
  }

  navbar {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    font-size: 150%
  }

  navbar a {
    text-decoration: none;
    color: white;
  }

  navbar a:hover {
    color: #f1be32;
  }

  navbar ul {
    display: flex;
    text-align: center;
    margin: 0;
    gap: 100px;
  }

  navbar li {
    list-style-type: none;
    display: inline;
  }

Hello!

In a real-world project, your solution would be fine.

This challenge wants you to fix the navbar-element itself to the top.
Just pass the CSS from the container to the navbar and it will pass!

I know, I would just be forced to completely reformat the header completely and edit all the media queries I made. I guess if thats the only solution then I should have accounted for this sooner. However, the answers I’ve read to this same question seem to have allowed the header being fixed with the navbar within it. That’s why I created the post because my code seems to match others that have passed. It confuses me.

I get your confusion, you did nothing wrong.
That’s why I confirmed your solution actually passes in real life.

Some challenges here have a hard-coded solution that you must follow to pass.

Gotcha. Thank you for the reply. Much appreciated.

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