Nav bar top of screen

HTML-CSS
1

so for the product landing page the test case checking if my nav bar is at the top of the screen is failing.
WHY?

my css.

nav ul{
    list-style-type: none;
    /*list style type dumps the dots */ 
    margin: 0;
    padding: 0;
    /*The overflow property specifies what should happen if content overflows an element's box. */
    overflow: hidden;
    background-color: #C0C0C0;
    position: fixed;
    /*position fixed makes it stay at the spot
      on the screen even if you scroll down 
    */
    top: 0;
    width: 100%;
  
    border: 2px solid #000;
}

nav li{
    border-right: 2px solid #000000;
    float: left;
}

nav li a {
    display: block;
    color: black;
    text-align: center;
    /*The CSS padding property is used to generate space around an element's content, inside of any defined borders. */
    padding: 14px 16px;
    text-decoration: none;
}

nav li a:hover {
    background-color: #A9A9A9;
    color: white;
}

my html

<!––my header ––>
  <header id="header" class="green-gradient-down">
    
    <!–– my navigation bar ––>
    <nav id="nav-bar">
      <ul>
        <li ><a class="nav-link" href="#header-text">Home</a></li>
        <li ><a class="nav-link" href="#about">About</a></li>
        <li ><a class="nav-link" href="#music">Music</a></li>
        <li ><a class="nav-link" href="#contact">Contact</a></li>
      </ul>
    </nav>
</header>
2

If you could provide a codepen, it would be easy to test the results, before that, try applying the fixed props to the nav instead of ul

3


There is a code pen. The nav bar displays in the top left yet the test case will not pass. I assume its looking for a variable to be set to something and it maybe that I’m using bootstrap instead of flexbox. ( I prefer bootstrap)

5

I did not think sharing my whole project was needed.


There it is if you so wish. Also, I know its failing user story 1 and 2 under layout. Thats why I came for help. I didn’t think I had to put my nav bar in flex box since it clearly is displaying in the top of the view port. I prefer bootstrap anyway. The user story even says I can use bootstrap if I like.

1 Like
6

Here it is,

When it says the navbar should be at the top it means it should cover the entire width

I removed postion:fixed from the ul and moved to #nav-bar and it passed 15, then
NOTE: along with top and left 0 and width to 100%

I used flexbox to the ul and voila, it passed everything

8

Thanks! Will try this out tomorrow as I’m not at my pc rn.

9

I only needed help with that specific problem not the rest of my project. @Sujith3021 was able to solve it so no worries.