Исправлена ​​Bootstrap панель навигации, перезаписываемая содержимым страницы - PullRequest
Новая
       5

Исправлена ​​Bootstrap панель навигации, перезаписываемая содержимым страницы

0 голосов
/ 23 апреля 2020

Я использую пример навигационной панели отсюда Пример навигационной панели :

У меня возникает проблема, когда я прокручиваю вниз по странице навигационную панель, которая исправлена, она переопределяется по содержанию под ним.

Это панель навигации: 

<!-- Navigation if fluidic defult-->
<nav class="nav">
    <div class="container">
        <div class="logo">
            <a href="#">Your Logo</a>
        </div>
        <div id="mainListDiv" class="main_list">
            <ul class="navlinks">
                <li><a href="#">About</a></li>
                <li><a href="#">Portfolio</a></li>
                <li><a href="#">Services</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </div>
        <span class="navTrigger">
            <i></i>
            <i></i>
            <i></i>
        </span>
    </div>
</nav>

<section class="home">
</section>
<div style="height: 1000px">
    <!-- just to make scrolling effect possible -->

Теперь мой собственный контент начинается здесь, он состоит из bootstrap карусели и карт, завернутых в bootstrap контейнер: 

!--Main contnet wraped in container Bootstrap grid system-->
<div class="container">
    <div class="row">
        <!--Take 3 columsn width for our left most list menu-->
        <div class="col-lg-3">
            <h1 class="my-4">Shop Name</h1>
            <div class="list-group ">
                <a href="#" class="list-group-item ">Category 1</a>
                <a href="#" class="list-group-item ">Category 1</a>
                <a href="#" class="list-group-item ">Category 1</a>
            </div>

        </div>

        <!--Main body - Botstrap Carousle-->
        <div class="col-lg-9">
            <div id="carouselExampleIndicators" class="carousel slide carousel-fade my-4 " data-ride="carousel">

Я не включил весь код, так как он достаточно длинный.

Это изображение панели навигации было переопределено содержимым под ним при прокрутке страницы вниз. :

Fixed nav bar overridden as we scroll down the page

Итак, мой вопрос, что может вызвать это?

1 Ответ

1 голос
/ 23 апреля 2020

Вы должны добавить другие классы, такие как fixed-top, чтобы исправить это и поверх содержимого. Попробуйте: 

<nav class="navbar fixed-top">
  […]
</nav>

Учтите, что использование элемента nav здесь неправильно. Вы должны попробовать что-то вроде: 

<header class="navbar fixed-top">
  <a class="navbar-brand" href="#" >Your Logo</a>
  <button class="navbar-toggler">
    <span class="navbar-toggler-icon"></span>
  </button>
  <nav class="navbar-nav">
    <ul>
      <li><a href="#">About</a></li>
      <li><a href="#">Portfolio</a></li>
      <li><a href="#">Services</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
</header>

Мой пример далек от завершения, но вы можете увидеть больше примеров здесь: https://getbootstrap.com/docs/4.4/components/navbar/. Ваш элемент должен иметь класс fixed-*, чтобы получить z-index выше, чем содержимое ниже, или он может быть переопределен следующим образом. Если вы планируете добавить два или более элемента с позицией absolute или fixed, то для каждого из них следует установить z-index.

...