Nav bar top of screen

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>

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


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)

You did not even include the test script in your pen. Also, when I add the test script and run Product Landing Page tests, you are only passing 2 out of the 16 user stories.

Anyway, to answer your question. the reason you are failing the test #1 under Layout is because you first need to complete user story #1 and #3.

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

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

There is a big difference between posting partial code and full code. I assumed that your code pen you posted earlier was all you had written, so that is all I had to base my comments on.

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

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

It is always best to show the entire project, because there could have been some other html or css issue causing your problem. Sometimes you may think something is isolated to a specific section and can be very surprised that something in a completely different section is the culprit.

Anyway, I am glad you got the help you needed.