Product Landing Page - Build a Product Landing Page

HTML-CSS
1

I am working on the Product Landing Page project and the last thing I need to complete the project is " Your #nav-bar should always be at the top of the viewport." I dont understand why it wont let me submit as I already did everything for the navbar to stay at the top of the viewport.

Your code so far

<div class="nav-container">
        <nav id="nav-bar">
          <a class="nav-link" href="#features">Features</a>
          <a class="nav-link" href="#video">How It Works</a>
          <a class="nav-link" href="#prices">Pricing</a>
        </nav>
      </div>

#nav-bar {
  display: flex;
  z-index: 9999;
  position: fixed;
  border: 2px solid lightgray;
  padding: 5px;
  top: 0;
}

.nav-link:hover {
  background-color: white;
}

.nav-container {
  display: flex;
  justify-content: flex-end;
  padding: 10px;
}

.nav-link {
  text-decoration: none;
  display: flex;
  justify-content: space-between;
  padding: 5px 25px;
  color: black;
  font-family: sans-serif;
}

Your browser information:

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

Challenge: Product Landing Page - Build a Product Landing Page

Link to the challenge:

2

Hello.

Also share the html please, since the css is good, the issue should come from the html.

But first is your #nav-bar actually always at the top of the viewport ? No problem ?

3

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