Есть кот такой код (взять с сайта bootstrap MD:
<header id="header">
<nav class="navbar z-depth-0 navbar-static-top">
<div class="container mt-5">
<a href="#" class="navbar-brand"><span>S</span>mart</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent20"
aria-controls="navbarSupportedContent20" aria-expanded="false" aria-label="Toggle navigation">
<div class="animated-icon1"><span></span><span></span><span></span></div>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent20">
<ul class="navbar-nav mr-auto text-center">
<li class="nav-item ">
<a href="#" class="nav-link active hoverable">Home<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a href="#" class="nav-link hoverable">Work</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link hoverable">Feature</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link hoverable">Service</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link hoverable">Team</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link hoverable">Client said</a>
</li>
</ul>
</div>
</div>
</nav>
<div id="intro" class="view">
<div class="container-fluid d-flex align-items-center justify-content-center h-50">
<div class="row d-flex justify-content-center text-center">
<div class="col-md-10 ">
<h1 class="dispay-5 font-weight-bold p-5 m-4"><span>Smart </span>Agency Landign Page</h2>
</div>
<h4 class="mt-5">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores, fuga provident. Libero magni quibusdam labore ad iste saepe hic, maxime qui ipsum tempore beatae, volu tomi ptates doloremque rerum aspernatur dolorum at!</h4>
</div>
</div>
</div>
</header>
.animated-icon1{
width: 30px;
height: 20px;
position: relative;
margin: 0px;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .5s ease-in-out;
-moz-transition: .5s ease-in-out;
-o-transition: .5s ease-in-out;
transition: .5s ease-in-out;
cursor: pointer;
}
.animated-icon1 span{
display: block;
position: absolute;
height: 3px;
width: 100%;
border-radius: 9px;
opacity: 1;
left: 0;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .25s ease-in-out;
-moz-transition: .25s ease-in-out;
-o-transition: .25s ease-in-out;
transition: .25s ease-in-out;
}
.animated-icon1 span {
background: #706b73;
}
.animated-icon1 span:nth-child(1) {
top: 0px;
}
.animated-icon1 span:nth-child(2) {
top: 10px;
}
.animated-icon1 span:nth-child(3) {
top: 20px;
}
.animated-icon1.open span:nth-child(1) {
top: 11px;
-webkit-transform: rotate(135deg);
-moz-transform: rotate(135deg);
-o-transform: rotate(135deg);
transform: rotate(135deg);
}
.animated-icon1.open span:nth-child(2) {
opacity: 0;
left: -60px;
}
.animated-icon1.open span:nth-child(3) {
top: 11px;
-webkit-transform: rotate(-135deg);
-moz-transform: rotate(-135deg);
-o-transform: rotate(-135deg);
transform: rotate(-135deg);
}
$(document).ready(function () {
$('.navbar-toggler').on('click', function () {
$('.animated-icon1').toggleClass('open');
});
});
Когда меню открывается происходит сдвиг всего содержимого что находится в теге , как можно сделать так что бы меню раскрывалось поверх содержимого?
Простой
Простой
