0

enter image description here

I cannot figure out why, when I scroll there is a portion of the background image that is showing between the nav and the top of the page. I moved the z-index of the nav to 99 which worked for bumping it in front of the background image.

Here's the link to the codepen source code: https://codepen.io/mclimb/pen/MWgZPmm

    
    html, body {
        height: 100%;
    }
    body{
        font-family: "Helvetica";
    }
    .lander{
        background-image: url("https://cdn.pixabay.com/photo/2014/11/13/23/34/london-530055_960_720.jpg");
        height:90vh;
        width:auto;
        position:relative;
        background-size:cover;
        color:white;
        text-align:center;
    }
    
    #let-credit{
        font-size:2em;
        padding:1.5em 0em 0em 0em;
        font-weight: 300;
    }
    #how-it-works{
        font-weight:300;
    }
    #logo{
        margin-right: auto;
    }
    .navigation{
        top:0;
        background-color: white;
        width: 100vw;
        list-style: none;
        padding: 1em 0em 1em 0em;
        display:flex;
        position: fixed;
        z-index: 99;
    }
    
    .nav {
        padding: 0em 1em 0em 1em;
    }
    
    .bottom-border:hover{
        border-bottom: 3px solid grey;
    }
   <!DOCTYPE html>
    <html lang="en">
        <head>
            <link rel="stylesheet" href="site.css">
        </head>
        <body>
            <div>
                <ul class="navigation">
                    <li class="nav" id="logo">Company logo goes here</li>
                    <div class="bottom-border">
                        <li class="nav">Home</li>
                    </div>
                    <li class="nav">FAQ</li>
                    <li class="nav">Sign-up</li>
                </ul>
            </div>
            <div class="lander">    
                <h1 id="let-credit">This is<br>a test site.</h1>
                <h4 id="how-it-works">How it works.</h4>
            </div>
            <ol id="how-it-works">
                <li>lorem</li>
                <li>Ipsum.</li>
                <li>Lorem.</li>
            </ol>
        </body>
    </html>
Temani Afif
  • 245,468
  • 26
  • 309
  • 415
mpc75
  • 937
  • 9
  • 22

2 Answers2

1

It is because you did not clear the margin of the ul HTML element

Seb468
  • 25
  • 2
1

At the start of your css file write this code * { margin:0; padding:0; } This code selects anything in your html file and removes all default margins and paddings.

Habib Mhamadi
  • 729
  • 1
  • 6
  • 15