The navbar is overlaying the main content of the site-CodePudding

I have a transparent navbar which always keeps overlaying the main content.

HTML:

<!DOCTYPE html>
<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>Navbar</title>
    <link rel="stylesheet" href="styles.css">
    <!-- <script src="index.js"></script> -->
</head>
<body>
    <header id="header_main">
        <div id="d1">
            <h1 id="h1_title_responsive">YASH</h1>
        </div>
        <ul id="ul_nav">
            <li  id="li1"><a href="#" ><img src="logo.png" id="logo_img"></a></li>
            <li  id="li2"><a href="index.html" >Home</a></li>
            <li  id="li3"><a href="#" >About</a></li>
            <li  id="li4"><a href="#" >Contact</a></li>
            <h1 id="h1_title">YASH</h1>
            <li id="search_li"><input name="search" id="search_box" placeholder="Search this website" type="text"></li>
        </ul>
    </header>
    <div id="d2">
        <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos ipsam et quam eum placeat consequatur iure at rerum? Necessitatibus numquam facilis, fugiat non eum ipsum. Aperiam maxime provident harum quia!
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa excepturi a nihil laudantium corporis fugit quisquam enim natus facilis dolor. Vitae quibusdam blanditiis atque, eligendi architecto hic repellat amet accusantium!
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea fugit enim natus? Aspernatur libero alias unde veniam cumque impedit cum corrupti facere consectetur molestiae laudantium, asperiores esse quis, autem saepe
        </p>
    </div>
</body>
</html>

CSS:

*{
    margin: 0;
    padding: 0;
}

#header_main{
    background-color: rgba(0, 0, 0, 0.6);
    position: fixed;
    width: 100%;
}
body{
    background: red;
}
.li_nav{
    list-style: none;
    margin: 0.9vh 1vw;
    font-size: large;
    z-index: 1;
    font-weight: bolder;
}
a{
    color: white;
    text-decoration: none;
    padding: 2px;
    border-radius: 3px;
}
.a_text:hover{
    color: black;
    background: white;
}
#li1{
    color: white;
}
#logo_img{
    height: 40px;
    width: auto;
}
#ul_nav{
    display: flex;
    align-items: center;
    justify-content: left;
}
#h1_title{
    color: white;
    display: flex;
    justify-content: center;
    position: absolute;
    width: 100%;
}
#d1{
    display: none;
}
#h1_title_responsive{
    display: flex;
    color: white;
    justify-content: center;
    position:relative;
    width: 100vw;
}
#search_box{
    border-radius: 7px;
    height: 2em;
    font-size: 80%;
    font-weight: bolder;
    width: 170%;
}
#search_li{
    list-style: none;
    position: absolute;
    left: 75%;
    width: 12.5%;
}
#d2{
    height: 1000vh;
}
@media (max-width: 700px) {
    #h1{
        visibility: hidden;
    }
    #d1{
        display: flex;
    }
}[enter image description here][1]

This is a screenshot of the issue:

https://i.stack.imgur.com/WgWoL.png

and in my css the #d2 is 1000vh because I want the navbar to work perfectly even when scrolling

I world really appreciate if someone could help :)

stack overflow is telling me that"It looks like your post is mostly code; please add some more details" so I am adding these fake details:

please ignore: "helo jav ppython css html ruby php F# C# c C and vnwLVNLKWNKVL UBAKLSVNKLNASV shinchan doraemon laptop gaming pc"

CodePudding user response：

The navbar position: fixed means that the navbar element is removed from the flow of the document.

You can find the full explanation of what position: fixed does here: https://developer.mozilla.org/en-US/docs/Web/CSS/position.

To prevent the navbar from covering the main content, you have to add either some padding or margin above the content.

#d2{
   padding-top: // height of the navbar   some extra
}

CodePudding user response：

The navbar has position fixed. Read more here: https://developer.mozilla.org/en-US/docs/Web/CSS/position

Fix this by adding a height to your navbar.

Example:

#header_main{
    background-color: rgba(0, 0, 0, 0.6);
    position: fixed;
    width: 100%;
    height:50px; /*set to your own*/
}

Good luck!