Css position fixed on header hides content
Solution 1
Give padding-top:58px;
to the .responsiveContainer
and add top:0;
to the .header
.
.responsiveContainer {
width: 100%;
// Add padding top
padding-top: 58px;
}
.header {
background-color: #000000;
padding: 10px;
padding-left: 0;
padding-right: 0;
box-shadow: 0 5px 0 #232323;
text-align: center;
width: 100%;
position: fixed;
// Add top 0
top: 0;
}
According to MDN:
fixed
Do not leave space for the element. Instead, position it at a specified position relative to the screen's viewport and don't move it when scrolled. When printing, position it at that fixed position on every page. This value always create a new stacking context.
Solution 2
You need put the <div class="header">
inside of a div with defined height, like:
<div class="heightTest">
<div class="header">
<div class="navbar">
<ul>
...
</ul>
</div>
</div>
</div>
and css:
.heightTest{height:90px;}
Jsfiddle: http://jsfiddle.net/vwzhda41/2/
Solution 3
Try to use
padding-top: 58px;/*the height of the header*/`
instead of
margin-top:10px;
Solution 4
/* Copyright © 2015 Dynavio */
/* Main Site Settings */
*,
body {
padding: 0;
margin: 0;
}
body {
background-color: #FFFFFF;
}
.responsiveContainer {
width: 100%;
}
/* End Of Main Site Settings */
/* Header */
.header {
background-color: #000000;
padding: 10px;
padding-left: 0;
padding-right: 0;
box-shadow: 0 5px 0 #232323;
text-align: center;
width: 100%;
position: fixed;
}
.navbar {
background-color: #131313;
padding: 10px;
}
.navElem {
display: inline;
margin: -2px;
}
.navLink {
text-decoration: none;
padding: 10px;
padding-top: 11px;
color: #FFFFFF;
font-family: SinkinSans;
transition: all 0.5s;
-moz-transition: all 0.5s;
-webkit-transition: all 0.5s;
-o-transition: all 0.5s;
}
.navLink:hover {
background-color: #0044FF;
box-shadow: 0 5px 0 #01268A;
}
.navLink:visited {
color: #FFFFFF;
}
.active {
background-color: #0044FF;
box-shadow: 0 5px 0 #01268A;
}
/* End Of Header */
/* Site Content */
.startBox {
background-color: #0044FF;
position: relative;
top: 50px;
}
/* End Of Site Content */
/* Alignment Classes */
.alignLeft {
text-align: left;
}
/* End Of Alignment Classes */
<div class="responsiveContainer">
<div class="header">
<div class="navbar">
<ul>
<li class="navElem"><a href="#" class="navLink active">Home Page</a>
</li>
<li class="navElem"><a href="#" class="navLink">Our Products</a>
</li>
<li class="navElem"><a href="#" class="navLink">Contact Us</a>
</li>
<li class="navElem"><a href="#" class="navLink">About Us</a>
</li>
</ul>
</div>
</div>
<div class="startBox">
<p>dwddwwdwdd</p>
</div>
</div>
Related videos on Youtube
Jojo01
Updated on June 30, 2022Comments
-
Jojo01 about 2 years
I am making a new website, and i have a problem with the header... I set the header's position to fixed, and that works but the content below the header is hidden. I tried to move the content down with
margin-top: 10px
, but all it did was move the header down.Link to jsfiddle:
-
Jojo01 over 8 yearsThanks, this worked i will accept this as soon as possible.
-
tikej over 3 yearswon't fixed padding cause problems like too much space, when we shrink the window vertically and the header height changes?