"Your #nav-bar should always be at the top of the viewport", but it is already

Working on the “Product Landing Page” project. The only thing that’s not passing says: “Your #nav-bar should always be at the top of the viewport.”

However, my #nav-bar absolutely is always at the top of the page. I’ve been working at this for over an hour. I’ve been looking through the forum and have even tried copying other solutions line for line. No luck.


<nav id="nav-bar">
      <a href="#info" class="nav-link"><button class="navButton">Info</button></a>
      <a href="#menu" class="nav-link"><button class="navButton">Menu</button></a>
      <a href="#live" class="nav-link"><button class="navButton">Live Stream</button></a>
      <a href="#form" class="nav-link"><button class="navButton">Order Online</button></a>
      <a href="#newsletter" class="nav-link"><button class="navButton">Newsletter</button></a>
      <a href="#review" class="nav-link"><button class="navButton">Leave A Review</button></a>
      <a href="#contact" class="nav-link"><button class="navButton">Contact</button></a>


  position: fixed;
  width: 100%;
  top: 0;
  left: 30%;
  right: 0;
  bottom: 0;
  min-height: 75px;

Your browser information:

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

Challenge Information:

Product Landing Page - Build a Product Landing Page

Update: Fixed it.
The problem was not with my #nav-bar, but rather with my media query at the top of my CSS

1 Like

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