Nav bar top of screen

Nav bar top of screen
0

#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)


#4

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.


#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.


#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


#7

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.


#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.


#10

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.