Prevent text from going behind navbar

HTML-CSS
1

Hello, I have a problem. I’ve just coded a responsive navbar and added divs with onclick function with CSS not JS. I want the text place right under the navbar but not behind it and I can’t manage it. Here’s the code:

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style3.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
* {
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
}

.navbar {
    width: 100%;
    height: 100px;
    background-color: #00aeef;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.8);

}

ul {
    list-style-type: none;
    font-size: 25px;
    font-family: "Montserrat", sans-serif;
}

li {
    float: right;
    line-height: 100px;
    margin-right: 25px;
    transition: 0.1s ease-out;
}

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

li:hover {
    font-size: 33px;
}

.first {
    list-style-type: none;
    font-size: 30px;
    color: white;
    display: none;
}

#click {
    display: none;
}

#container {
    width: 100%;
    height: 100vh;
    
    text-align: center;
}

#container div {
    width: 100%;
    height: 100%;
}

@media (max-width: 700px) {
    .navbar {
        background-color: #00aeef;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.8);
        position: fixed;
    }

    ul {
        position: fixed;
        top: 100px;
        height: 100vh;
        width: 100%;
        background-color: #00d2ff;
        left: 0;
        transition: 0.2s cubic-bezier(0.455, 0.03, 0.515, 0.955)
    }

    li {
        position: relative;
        float: none;
        display: flex;
        justify-content: center;
        top: 15%;
        line-height: 80px;
        transition: 0.2s ease-out;
    }

    #click {
        cursor: pointer;
    }

    .first {
        display: block;
        left: 90%;
        top: 10%;
        cursor: pointer;
    }

    #click:checked ~ ul {
        left: 100%;
    }
}
</style>
</head>
<body>
    <div class="navbar">
        <input type="checkbox" id="click">
        <label for="click">
            <li class="first"><i class="fa fa-bars"></i></li>
        </label>    
        <ul>
            <li><a href="#Statistics">Statistics</a></li>
            <li><a href="#Import">Import</a></li>
            <li><a href="#Planes">Planes</a></li>
            <li><a href="#About">About</a></li>
            <li><a href="#Home">Home</a></li>
        </ul>
    </div>
    <div id="container">
        <div id="Home"><h1>Home</h1></div>
        <div id="About"><h1>About</h1></div>
        <div id="Planes"><h1>Planes</h1></div>
        <div id="Import"><h1>Import</h1></div>
        <div id="Statistics"><h1>Statistics</h1></div>
    </div>
</body>
</html>
2

If you have position set to fixed then all other elements will ignore it in terms of positioning. You just need to apply a margin or padding top the top of the div you want to be bellow. Set that value to the height of the navbar, and maybe a few more pixels for spacing.

3

Could you maybe add a code then I’ll understand it better :slight_smile:

4

Use margin to add space to where the nav bar is. Also be ware of margin collapsing (seriously - google it)

5

You could have something like this

.navbar {
   height: 5vh;
}

.container {
   margin-top: calc(5vh + 16px); 
}

Something like that, you could set the navbar height as a variable so it can be easily changed. But that’s basically it, applying margin to an element.

6

image
image910×853 10.2 KB

Then I get this

7

Are you applying the margin to the “Home” or to the navbar?

Also add this to the navbar

{
   top: 0;
   left: 0;
}
8

i want the text placed like this but i has to be able tp scroll

image
image945×855 11 KB

9

Send the styles here

10 
* {
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
}

.navbar {
    width: 100%;
    height: 100px;
    background-color: #00aeef;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.8);
    position: fixed;
    top: 0;
   left: 0;
}

ul {
    list-style-type: none;
    font-size: 25px;
    font-family: "Montserrat", sans-serif;
}

li {
    float: right;
    line-height: 100px;
    margin-right: 25px;
    transition: 0.1s ease-out;
}

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

li:hover {
    font-size: 33px;
}

.first {
    list-style-type: none;
    font-size: 30px;
    color: white;
    display: none;
}

#click {
    display: none;
}

#container {
    width: 100%;
    height: 100vh;
    text-align: center;
    top: 100px;
}

#container div{
    width: 100%;
    height: 100%;
}
11

Use margin-top or padding-top on the #container instead of top

12

nothing happens :frowning:

13

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.