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

HTML-CSS
1

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.

The HTML


<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>
    </nav>

The CSS


#nav-bar{
  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/119.0.0.0 Safari/537.36

Challenge Information:

Product Landing Page - Build a Product Landing Page

2

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