Переключатель Navbar Bootstrap заставляет мой контент двигаться вниз - PullRequest
Новая
       9

Переключатель Navbar Bootstrap заставляет мой контент двигаться вниз

1 голос
/ 17 июня 2019

Мой переключатель navbar (меню гамбургеров) отображается только на маленьких экранах.Но когда он появляется и я щелкаю по нему, все мои элементы в заголовке перемещаются вниз.Я не хочу, чтобы это произошло, я хотел бы видеть только меню, и это меню находится над заголовком.

Вот мой текущий код: 

header {
    height: 100vh;
    box-shadow: inset 100vw 0 0 #00000066;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
        integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">


<header>
        <nav class="navbar navbar-expand-lg navbar-light" style="background-color: #6E7476">
            <a class="navbar-brand" href="#">Online TV</a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup"
                aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse justify-content-center" id="navbarNavAltMarkup">
                <nav class="nav nav-tabs">
                    <a class="nav-item nav-link active" href="#">Active</a>
                    <a class="nav-item nav-link" href="#">Much </a>
                    <a class="nav-item nav-link" href="#">Link</a>
                </nav>
            </div>
          
        </nav>

        <div class="container-fluid main-text mt-sm-3 mt-lg-5 js-slidein block">
            <h4 class="display-4">The Best IPTV for Albanian users </h4>
        </div>
    </header>






<!-- AVOID THIS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
            integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous">
        </script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
            integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous">
        </script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
            integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous">
        </script>
        <script src="https://code.jquery.com/jquery-3.4.1.min.js"
            integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
        <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"
            integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>

Ответы [ 2 ]

0 голосов
/ 17 июня 2019

Вы можете применить встроенный класс начальной загрузки.Добавьте position-absolute w-100 к nav и position-relative к container-fluid

header {
  height: 100vh;
  box-shadow: inset 100vw 0 0 #00000066;
}

.position-relative {
  padding-top: 55px;
  z-index: -1
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<header>
  <nav class="navbar navbar-expand-lg navbar-light position-absolute w-100" style="background-color: #6E7476">
    <a class="navbar-brand" href="#">Online TV</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
    <div class="collapse navbar-collapse justify-content-center" id="navbarNavAltMarkup">
      <nav class="nav nav-tabs">
        <a class="nav-item nav-link active" href="#">Active</a>
        <a class="nav-item nav-link" href="#">Much </a>
        <a class="nav-item nav-link" href="#">Link</a>
      </nav>
    </div>

  </nav>

  <div class="container-fluid main-text mt-sm-3 mt-lg-5 js-slidein block position-relative">
    <h4 class="display-4">The Best IPTV for Albanian users </h4>
  </div>
</header>

<!-- AVOID THIS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous">
</script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous">
</script>
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>
0 голосов
/ 17 июня 2019

Попробуйте следующее: 

#navbarNavAltMarkup {
    position: absolute;
    z-index: 1;
}

.display-4 {
    position: relative;
}
...