修复了 Bootstrap 导航栏被页面内容覆盖的问题

Question

我正在使用此处的导航栏示例 nav bar example:

我遇到的问题是，当我向下滚动页面时，固定的导航栏被下面的内容覆盖。

这是导航栏：

<!-- 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">

我没有包含所有代码，因为它太长了。

这是当您向下滚动页面时导航栏被其下方的内容覆盖的图像：

所以我的问题是什么导致了这个？

Answer 1

您必须添加其他 class 等 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-* class 才能获得比下面内容更高的 z-index ，否则它可能会像这样被覆盖。如果您计划添加两个或更多位置为 absolute 或 fixed 的元素，那么您应该相应地为每个元素设置一个 z-index。

修复了 Bootstrap 导航栏被页面内容覆盖的问题

Fixed Bootstrap Nav bar overridden by page content

navigation

bootstrap-4