Fixed header closes part of the content
There is a fixed header (at the top of the screen) with a height of 40px. But it covers up some of the content.
How do I fix this? I tried to set it margin-bottom: 40px - it didn't help.
#header {
width: 100%;
position: fixed;
overflow: hidden;
z-index: 3;
}<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<header id="header">
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</header>2 answers
Blocks with display: fixed; do not participate in the overall rendering flow. That's why it doesn't work.
You need to set the block that is closed by this header, margin-top: 40px;
See this article about positioning elements http://htmlbook.ru/css/position
I would advise you not to push away the next block, but to set the indent for the body. Look ahead: if for some reason you delete the block that goes behind the header, or decide to swap the blocks, then you will again have the block under the header, because it will not have an indent. If you set the indent for the body, relative to which the header is positioned, then this problem will not occur.
In the example below, the header is fixed relative to the body, and the body is indented equal to the height of the header. All other blocks feel fine without knowing anything about the header.
Http://codepen.io/d-batmanov/pen/MvVvvx
body {
padding: 0;
margin: 0;
padding-top: 40px;
}
.header {
width: 100%;
height: 40px;
border: 1px solid red;
position: fixed;
top: 0;
left: 0;
}
.content {
border: 1px solid black;
height: 800px;
}<div class="header">Fixed header</div>
<div class="content">
<ul class="list-item">
<li class="item"><div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae minima veritatis amet vero officiis error deleniti eos, necessitatibus iusto asperiores quis laboriosam natus commodi rem aliquam recusandae molestiae atque quo?</div></li>
<li class="item"><div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Natus consectetur, maxime voluptas ad dolores numquam tempora odio ipsa laboriosam quae quibusdam, aut a sapiente odit non adipisci perspiciatis. Vitae, repudiandae.</div></li>
<li class="item"><div>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ratione, dolorem corrupti dicta atque, et mollitia obcaecati in exercitationem distinctio sunt sit ea id sapiente. Fugiat pariatur est iste earum itaque.</div></li>
</ul>