@destroer18
Начинаю изучать HTML, CSS, JS.

Как убрать сдвиг содержимого при открытии «Hamburger menu» в Bootstrap?

Есть кот такой код (взять с сайта 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');

  });

});


Когда меню открывается происходит сдвиг всего содержимого что находится в теге , как можно сделать так что бы меню раскрывалось поверх содержимого?
  • Вопрос задан
  • 427 просмотров
Пригласить эксперта
Ответы на вопрос 1
Nikita-Fast
@Nikita-Fast
SVGшник и леплю что попало
не знаю как это в bootstrap но в css это абсолютное позиционирование
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы