Help with nav bar please!

Help with nav bar please!
0

#1

Need help with keeping nav bar on top of the viewport

this is my page so far



<main>
<!DOCTYPE html>
  <!---Nav bar---> 
    <header id="headerone">
   <nav id="nav-bar" class="shift" 
  <ul>
  <li><a class="nav-link" href="home">Home</a></li>
  <li><a class="nav-link" href="about" href="#About">About</a></li>
  <li><a class="nav-link" href="services" href="#Services">Services</a></li>
    <li><a class="nav-link" href="contact" href="#contact">Contact</a></li>    </header>
  </ul>
  </nav>
  </header> 
<!---header--->
<header id="header" class="navbar">
  LUXS, BEVERLY HILLS</header> 
<header>```

#2

Setting top and left to 0 would do the trick, but i guess the test requires the #nav-bar as fixed not the header.

Also you forgot to close this tag ,

<nav id="nav-bar" class="shift"


#3

It’s not necessary to set margin-right: 75%;. You could use just a margin: 0 auto;


#4
#nav-bar{
  position: fixed;
  top: 0%;
  left: 0;
  width: 100%; 
  background: linear-gradient(to bottom, #c4962d 0%, #000000 50%);
}

so i closed the open tag and i added and id=nav-bar but now it stretches across the screen and still does not pass


#5
#nav-bar{
  position: fixed;
  top: 0%;
  left: 0;
  width: 100%; 
  background: linear-gradient(to bottom, #c4962d 0%, #000000 50%);
}

thanks, so i set the margin 0 auto and added and id for the nav bar with above code but it still is not passing


#6

If you mean that the text overlaps your navbar, then you could use z-index: 1; as a #nav-bar style


#7
  1. The navbar should always be at the top of the viewport.
    #header or one of its children should be at the top of the viewport even after scrolling

Give your <header> an id=“header”, it requires an element with this id within the fixed positioned element.

Since you have another element with this same id, i would suggest to switch those id's


#8
  <li><a class="nav-link" href="about" href="#About">About</a></li>
  <li><a class="nav-link" href="services" href="#Services">Services</a></li>
    <li><a class="nav-link" href="contact" href="#contact">Contact</a></li>

Why do you set href="" two times.? Remove one, the challenge requires to navigate to the corresponding section within the page when the link is clicked