I recently came across an issue with a Bootstrap-based site I'm working on.
When I click the hamburger menu on mobile view, the main content doesn't shift down to accommodate it, causing an overlap. Not ideal :-(
Here's my Demo: https://jsfiddle.net/8kvgoxw3/
Does anyone have suggestions on how to fix this?
@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
body {
margin: 0px;
}
img {
max-width:100%
}
h1, .navbar-collapse ul li a, p, .nav-tabs > li > h2 > a, h2, h3, h4 {
font-weight: 300!important
}
h3 {
border-bottom:1px solid white;
margin-top:10px;
margin-bottom:0px;
padding-bottom:10px
}
h3 a, h3 a:hover {
color:white;
cursor:pointer;
}
h4 {
margin-bottom:0;
}
h5 {
font-size:16px;
font-weight:bold;
color:#fff;
margin-bottom:15px;
}
.item div div {
border-bottom: 1px solid grey;
padding-bottom: 5px;
}
/* Custom, iPhone Retina */
.cbp-af-header {
position: fixed;
top: 0;
left: 0;
transition: all 0.4s ease;
}
.cbp-af-header img{
transition: all 0.4s ease;
}
.cbp-af-inner {
transition: all 0.4s ease;
}
.cbp-af-header{
-webkit-animation-name:fadeInDown;
-webkit-animation-direction:normal;
-webkit-animation-play-state:running;
-webkit-animation-fill-mode:forwards;
-moz-animation-name:anim_titles;
-moz-animation-direction:normal;
-moz-animation-play-state:running;
-moz-animation-fill-mode:forwards;
-webkit-animation-iteration-count:1;
-moz-animation-iteration-count:1;
-webkit-animation-duration:.5s;
-moz-animation-duration:.5s;
-webkit-animation-delay:0s;
-moz-animation-delay:0s;
-webkit-animation-timing-function:ease-out;
-moz-animation-timing-function:ease-out;
}
.cbp-af-header .cbp-af-inner img {
margin: 20px 0;
}
.cbp-af-header.cbp-af-header-shrink .cbp-af-inner img {
margin: 10px 0;
}
.cbp-af-header.cbp-af-header-shrink {
height: 160px;
}
.cbp-af-header {
height: 355px;
}
.cbp-af-header.cbp-af-header-shrink img {
margin-top: 10px;
transition: all 0.5s ease 0s;
width: 42%;
height:unset;
}
button {
background:black!important;
z-index:99999999;
position:relative;
}
.container.body-text {
margin-top: 140px;
}
.nav {
background:blue
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<div class="container">
<nav class="navbar">
<div class="row">
<div class="col-md-12">
<div>
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="center-block text-center" style="text-align:center">
<div class="cbp-af-header">
<div class="cbp-af-inner">
<img src="http://placehold.it/600x200" alt="logo">
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav"> <li class=" menu-item menu-item-type-post_type menu-item-object-page menu-item-14"><a href="/test/">Test</a>
</li>
<li class=" menu-item menu-item-type-post_type menu-item-object-page menu-item-14"><a href="/test/">Test</a></li>
<li class=" menu-item menu-item-type-post_type menu-item-object-page menu-item-14"><a href="/test/">Test</a?</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</nav>
</div>
<div class="container body-text">
<div class="page">
<div class="text-center">
<h1 style="line-height:28px">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dapibus dolor et velit sodales, a pretium metus finibus. Vivamus lacinia a ligula vitae volutpat. Curabitur nulla lectus, aliquam ac massa at, lacinia mattis odio. Vivamus vitae orci urna. In iaculis sem a eleifend sollicitudin. Curabitur varius, felis vel efficitur condimentum, sapien est condimentum nibh, convallis faucibus sem tortor a purus. Aenean consequat nec diam quis aliquam. Aenean laoreet felis ac tincidunt iaculis. Quisque eu ipsum eget tortor sodales vehicula. Mauris sem lacus, tincidunt id sem id, posuere mollis velit. Nam enim magna, vulputate id eleifend eu, consectetur vel leo.</p>
</div>
</div>
</div>