Locking an element to a Browser window with fixed positioning

Tell us what’s happening:
Please help me out here. I have no idea what I’m doing wrong.

Your code so far


<style>
body {
  min-height: 150vh;
}
#navbar
  position: fixed; 
  top: 0px;
  left: 0px;



  width: 100%;
  background-color: #767676;
}
nav ul {
  margin: 0px;
  padding: 5px 0px 5px 30px;
}
nav li {
  display: inline;
  margin-right: 20px;
}
a {
  text-decoration: none;
}
</style>
<body>
<header>
  <h1>Welcome!</h1>
  <nav id="navbar">
    <ul>
      <li><a href="">Home</a></li>
      <li><a href="">Contact</a></li>
    </ul>
  </nav>
</header>
<p>I shift up when the #navbar is fixed to the browser window.</p>
</body>

Your browser information:

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

Challenge: Lock an Element to the Browser Window with Fixed Positioning

Link to the challenge:

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

You’re missing an opening { for your #navbar rule :slight_smile:

It still does not not work unfortunately. :cry:

Really? If I copy your code into the challenge and add the opening { - and delete the closing } that it automatically adds - the challenge passes. Can you show me your current code?

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

Ah, okay. A correctly formatted rule looks like this:

nav li {
  display: inline;
  margin-right: 20px;
}

Notice where the curly braces are?

1 Like