CODEWITHSUNDEEP
htmlcss
Mohamed Haitham
Mohamed Haitham

Reputation: 63

Fixed Header overlaps content and cannot fix it with padding or margin

I am trying to build a simple navigation header with position:fixed and and following content (div) gets under it, anybody knows how to fix this ?

I know the position:fixed takes the header out of the DOM flow so i tried applying padding-top to the body and margin top to any following div but it's moved together with the header still causing overlap

HTML ` 

    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="navbar.css">
</head>
<body>
    <div class="nav-container clearfix">
    <ul>
        <li><a class="active" href=#>HTML</a></li>
        <li><a href=#>CSS</a></li>
        <li><a href=#>JAVASCRIPT</a></li>
        <li><a href=#>PHP</a></li>
    </ul>
    </div>
    <div class="second">
            JAVASCRIPTJAVASCRIPTJAVASCRIPTJAVASCRIPTJAVASCRIPTJAVASCRIPTJAVASCRIPT
    </div>
</body>

`

CSS 

*{
    box-sizing: border-box;
    font-family: "Segoe UI",Arial,sans-serif;

}
body{
    height:3000px;
    margin:0;
    padding:0;
    padding-top:51.1px;
} 
.nav-container{
    width:100%;
    padding:0;
    background-color:#5f5f5f;
    position:fixed;
    box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16), 0 2px 10px 0 rgba(0,0,0,0.12);
    z-index:1;

}
.clearfix {
    content: "";
    display: table;
    clear: both;
}
ul {
    list-style-type: none;
    text-align: center;
    margin: 0;

}
li {
    float:left;
}
li a{
    display:block;
    color:#f1f1f1;
    padding: 14px 16px;
    text-decoration: none;
    text-align:center;
    font-size: 17px;
}
.active{
    background-color: mediumseagreen;
}

li a:hover:not(.active) {
    background-color: black;
}
.second{
    background-color: aqua;
    display:block;
    width:100%;
    height:2000px;
    z-index:10000; /*doesnt work bec. element not positioned*/
}

Expects only the content following the header to move when applying padding or margin.

Upvotes: 0

Views: 1681

Answers (2)

Ajithraj
Ajithraj

Reputation: 528

Are you expecting like this

<style>
*{
    box-sizing: border-box;
    font-family: "Segoe UI",Arial,sans-serif;
}
body{
    height:3000px;
    margin:0;
    padding:0;
    padding-top:51.1px;
} 
.nav-container{
    width:100%;
    padding:0;
    background-color:#5f5f5f;
    position:fixed;
    box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16), 0 2px 10px 0 rgba(0,0,0,0.12);
    z-index:1;
}
.clearfix {
    content: "";
    display: table;
    clear: both;top:0;
}
ul {
    list-style-type: none;
    text-align: center;
    margin: 0;
}
li {
    float:left;
}
li a{
    display:block;
    color:#f1f1f1;
    padding: 14px 16px;
    text-decoration: none;
    text-align:center;
    font-size: 17px;
}
.active{
    background-color: mediumseagreen;
}

li a:hover:not(.active) {
    background-color: black;
}
.second{
    background-color: aqua;
    display:block;
    width:90%;
    margin:5%;
    height:2000px;
    word-break: break-word;
    }
<div class="nav-container clearfix">
    <ul>
        <li><a class="active" href=#>HTML</a></li>
        <li><a href=#>CSS</a></li>
        <li><a href=#>JAVASCRIPT</a></li>
        <li><a href=#>PHP</a></li>
    </ul>
</div>

<div class="second">                          
     JAVASCRIPTJAVASCRIPTJAVASCRIPTJAVASCRIPTJAVASCRIPTJAVASCRIPTJAVASCRIPT
</div>

Upvotes: 0

an_owl
an_owl

Reputation: 69

If all your wanting to do is keep the menu on top of the page then remove position:fixed; https://jsfiddle.net/mkLan96o/

.nav-container{
width:100%;
padding:0;
background-color:#5f5f5f;

box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16), 0 2px 10px 0 rgba(0,0,0,0.12);
z-index:1;

If you want a scrolling menu then use bootstrap.

Upvotes: 0

Related Questions