CODEWITHSUNDEEP
htmlcss
user9410000
user9410000

Reputation:

how do i get my page content to scroll and dissapear behind my navbar?

I know this sounds funny but I have a navigation bar made with flexbox that is fixed at the top of my page. It looks great but you can see the page content scroll right through it. I need the content to disappear and scroll under the nav-bar starting from the bottom of the navbar if that makes sense.

Here's my code so you can try it out and see what I'm talking about.

body {
    
    background-color: black;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    margin: 0;
    padding: 0;
    position: relative;
    top: 108px;
    }


header {
    
    position: fixed;
    top: 0;
    left: 0;
    right:0;
    min-width: 100%;
    display: flex;
    height: 90px;
    justify-content:  space-between;
    align-items: center;
    margin: 0;
    padding: 0;
    z-index: ;
    

        }


.logo {
    display: flex;
    text-decoration: none;
    color: white;
    font-family: fantasy;
    font-size: 19px;
    padding: 0;
    margin-left: 15px;
    
    }



header a:hover {
    color: aqua;
                }


nav {
   width: 60%;
   margin: 25px;
    }



nav ul {
    display: flex;
    justify-content: space-between;
    list-style: none;
    padding: 0;
    
        }




nav li {
}


nav a {
    color: white;
    text-decoration: none;
    font-size: 19px;
    font-family: papyrus;
        }



nav a:hover {
    color: aqua;
            }


.headline {
    display: flex;
    width:30%;
    justify-content: center;
    position: relative;
    top: 454px;
    left: 498px;
    font: 24px cursive;
    z-index: ;
            }

.headline a {
    text-decoration: none;
    color: white;
            }



.headline  a:hover {
    color: aqua;
                    }



main{
    height: 3000px;
    min-width: 100%;
}

footer {
    height: 100px;
    text-align: center;
    font-family: fantasy;
    font-size: 19 px;
    color: white;
}
<!doctype html>
<html>
    <head>
        <title>AquaDrip</title>
        <link rel="stylesheet" type="text/css" href="style.css"/>
        
    </head>


    

    <body>
        <header>
            <a href="index.html" class="logo"><h1>AquaDrip</h1></a>
                    <nav>
                        <ul>
                            <li><a href="index.html">Applications</a></li>
                            <li><a href="video.html">pricing</a></li>
                            <li><a href="systems.html">Contact Us</a></li>
                            <li><a href="about.html">Careers</a></li>
                        </ul> 
                    </nav>
        </header>
    

        <main>
            <div class="headline">
            <h1><a href="#">Water</a> <a href="#">starts</a> <a href="#">here.</a></h1>
            </div>
            

        </main>
        
        <footer>
            <p>Written by: john doe</p>
            <p>2018.</p>
        </footer>
        
    </body>



</html>

Upvotes: 1

Views: 46

Answers (4)

Archit
Archit

Reputation: 69

Make these changes in html:

<ul class="nav">
   <li><a href="index.html">Applications</a></li>
   <li><a href="video.html">pricing</a></li>
   <li><a href="systems.html">Contact Us</a></li>
   <li><a href="about.html">Careers</a></li>
</ul>

Changes for css: 

.nav {
width: 60%;
margin: 25px;
display: flex;
justify-content: space-between;
list-style: none;
padding: 0;
background-color: blue;

}

.nav li {
display: inline-block;
}


.nav li a {
display: block;
color: white;
text-decoration: none;
font-size: 19px;
font-family: papyrus;
    }



.nav a:hover {
color: aqua;
        }

Upvotes: 1

user9410000
user9410000

Reputation:

okay z index is set imagine there being a bkgrnd img set to cover. i want the nav bar to blend and preform the z index but it doesnt want to

body {
    
    background-color: black;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    margin: 0;
    padding: 0;
    position: relative;
    top: 108px;
    }


header {
    
    position: fixed;
    top: 0;
    left: 0;
    right:0;
    min-width: 100%;
    display: flex;
    height: 90px;
    justify-content:  space-between;
    align-items: center;
    margin: 0;
    padding: 0;
    z-index: 100;
    

        }


.logo {
    display: flex;
    text-decoration: none;
    color: white;
    font-family: fantasy;
    font-size: 19px;
    padding: 0;
    margin-left: 15px;
    
    }



header a:hover {
    color: aqua;
                }


nav {
   width: 60%;
   margin: 25px;
    }



nav ul {
    display: flex;
    justify-content: space-between;
    list-style: none;
    padding: 0;
    
        }




nav li {
}


nav a {
    color: white;
    text-decoration: none;
    font-size: 19px;
    font-family: papyrus;
        }



nav a:hover {
    color: aqua;
            }


.headline {
    display: flex;
    width:30%;
    justify-content: center;
    position: relative;
    top: 454px;
    left: 498px;
    font: 24px cursive;
    z-index: ;
            }

.headline a {
    text-decoration: none;
    color: white;
            }



.headline  a:hover {
    color: aqua;
                    }



main{
    height: 3000px;
    min-width: 100%;
}

footer {
    height: 100px;
    text-align: center;
    font-family: fantasy;
    font-size: 19 px;
    color: white;
}
<!doctype html>
<html>
    <head>
        <title>AquaDrip</title>
        <link rel="stylesheet" type="text/css" href="style.css"/>
        
    </head>


    

    <body>
        <header>
            <a href="index.html" class="logo"><h1>AquaDrip</h1></a>
                    <nav>
                        <ul>
                            <li><a href="index.html">Applications</a></li>
                            <li><a href="video.html">pricing</a></li>
                            <li><a href="systems.html">Contact Us</a></li>
                            <li><a href="about.html">Careers</a></li>
                        </ul> 
                    </nav>
        </header>
    

        <main>
            <div class="headline">
            <h1><a href="#">Water</a> <a href="#">starts</a> <a href="#">here.</a></h1>
            </div>
            

        </main>
        
        <footer>
            <p>Written by: john doe</p>
            <p>2018.</p>
        </footer>
        
    </body>



</html>

Upvotes: 1

Jakub Muda
Jakub Muda

Reputation: 6714

It looks like a typo to me. Look at you z-index for header. You have no value there. Use z-index:100 or some other higher value. If you use z-index on your page elsewhere it would be always beneath the header.

I would also simplify a little bit your css. Example for body:

body {
    background: black;
    margin: 0;
    padding:108px 0 0;
    }

Upvotes: 0

kshetline
kshetline

Reputation: 13690

Try setting the background color of your header to black, and set its z-index to make sure it's above the scrolling material.

body {
    
    background-color: black;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    margin: 0;
    padding: 0;
    position: relative;
    top: 108px;
    }


header {
    
    position: fixed;
    top: 0;
    left: 0;
    right:0;
    min-width: 100%;
    display: flex;
    height: 90px;
    justify-content:  space-between;
    align-items: center;
    margin: 0;
    padding: 0;
    z-index: 100;
    background-color: black;

        }


.logo {
    display: flex;
    text-decoration: none;
    color: white;
    font-family: fantasy;
    font-size: 19px;
    padding: 0;
    margin-left: 15px;
    
    }



header a:hover {
    color: aqua;
                }


nav {
   width: 60%;
   margin: 25px;
    }



nav ul {
    display: flex;
    justify-content: space-between;
    list-style: none;
    padding: 0;
    
        }




nav li {
}


nav a {
    color: white;
    text-decoration: none;
    font-size: 19px;
    font-family: papyrus;
        }



nav a:hover {
    color: aqua;
            }


.headline {
    display: flex;
    width:30%;
    justify-content: center;
    position: relative;
    top: 454px;
    left: 498px;
    font: 24px cursive;
    z-index: ;
            }

.headline a {
    text-decoration: none;
    color: white;
            }



.headline  a:hover {
    color: aqua;
                    }



main{
    height: 3000px;
    min-width: 100%;
}

footer {
    height: 100px;
    text-align: center;
    font-family: fantasy;
    font-size: 19 px;
    color: white;
}
<!doctype html>
<html>
    <head>
        <title>AquaDrip</title>
        <link rel="stylesheet" type="text/css" href="style.css"/>
        
    </head>


    

    <body>
        <header>
            <a href="index.html" class="logo"><h1>AquaDrip</h1></a>
                    <nav>
                        <ul>
                            <li><a href="index.html">Applications</a></li>
                            <li><a href="video.html">pricing</a></li>
                            <li><a href="systems.html">Contact Us</a></li>
                            <li><a href="about.html">Careers</a></li>
                        </ul> 
                    </nav>
        </header>
    

        <main>
            <div class="headline">
            <h1><a href="#">Water</a> <a href="#">starts</a> <a href="#">here.</a></h1>
            </div>
            

        </main>
        
        <footer>
            <p>Written by: john doe</p>
            <p>2018.</p>
        </footer>
        
    </body>



</html>

Upvotes: 1

Related Questions