Значок меню начальной загрузки перемещается вверх при нажатии

Question

TLDR:

1. Как мне остановить значок меню начальной загрузки (гамбургер) при нажатии вверх (мне нужно, чтобы он оставался фиксированным на панели навигации)
2. Как мне расположить кнопку «Книга», чтобы она оставалась в правом верхнем углу панели навигации после расширения меню. (фиксированное положение вверху справа)

Я создал простое меню начальной загрузки, которое отлично работает на рабочем столе. Однако на мобильном я получаю это странное поведение, когда при нажатии на значок меню: он сдвигается на несколько пикселей вверх, затем, когда меню закрывается, он возвращается в свое нормальное положение.

После нескольких тестов удобства использования это поведение было определено как раздражающее. Также было установлено, что кнопка «Книга», которая отображается на закрытой навигационной панели на мобильном устройстве, перемещается в нижнюю часть навигационной панели при ее открытии. Можно ли остановить это поведение? Мне бы хотелось, чтобы кнопка оставалась в верхнем правом углу при открытии меню.

Код HTML:

<nav class="navbar sticky-top navbar-expand-lg navbar-light bg-light">
   <div class="container">
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
         aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarSupportedContent">
         <ul class="navbar-nav mr-auto">
            <li class="nav-item active">
               <a class="nav-link">Home
               <span class="sr-only">(current)</span>
               </a>
            </li>
            <li class="nav-item">
               <a class="nav-link">Vans</a>
            </li>
            <li class="nav-item">
               <a class="nav-link">Contract</a>
            </li>
            <li class="nav-item">
               <a class="nav-link">About</a>
            </li>
            <li class="nav-item">
               <a class="nav-link">App</a>
            </li>
         </ul>
      </div>
      <form class="form-inline my-2 my-lg-0">
         <a class="btn btn-outline-primary btn-book my-2 my-sm-0" >Book</a>
      </form>
   </div>
</nav>

Answer 1

Ваша кнопка меню движется из-за кнопки «Книга». Вставьте его перед элементом сжатия, измените порядок элементов в order-lg-1 и order-lg-2, и все должно работать нормально.

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<nav class="navbar sticky-top navbar-expand-lg navbar-light bg-light">
   <div class="container">
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
         aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
      </button>
      <form class="form-inline my-2 my-lg-0 order-lg-2">
         <a class="btn btn-outline-primary btn-book my-2 my-sm-0" >Book</a>
      </form>
      <div class="collapse navbar-collapse" id="navbarSupportedContent">
         <ul class="navbar-nav mr-auto order-lg-1">
            <li class="nav-item active">
               <a class="nav-link">Home
               <span class="sr-only">(current)</span>
               </a>
            </li>
            <li class="nav-item">
               <a class="nav-link">Vans</a>
            </li>
            <li class="nav-item">
               <a class="nav-link">Contract</a>
            </li>
            <li class="nav-item">
               <a class="nav-link">About</a>
            </li>
            <li class="nav-item">
               <a class="nav-link">App</a>
            </li>
         </ul>
      </div>
   </div>
</nav>