Question

当我尝试展开导航栏时，下面的内容会传递到导航栏中展开内容的顶部。有关详细信息，请参阅此图片。

此外，但随着用户开始滚动，导航栏会自行更正。 See this image for information

我尝试添加z-index，但没有帮助。

请帮助我。

导航栏代码：

<section class="topbar">
  <div class="container">
    <div class="link left">
      <a href="#">Contact Us</a> |
      <a href="tel:18004416005">Call Us (800) 441 - 6005</a>
    </div>
    <div class="social right">
      <a href="#"><i class="fa fa-facebook" aria-hidden="true"></i></a>
      <a href="#"><i class="fa fa-linkedin" aria-hidden="true"></i></a>
    </div>
  </div>
</section>
<div id="sticker">
  <header id="header" class="fullBanner">
      <nav class="navbar navbar-default ">
        <div class="container">
          <div class="container-fluid">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
              <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
              </button>
              <a class="navbar-brand" href="#"><img src="<?php web_url(); ?>/img/logo/how-to-collect-delinquent-hoa-dues.jpg" width="200" id="img-logo" alt="logo"></a>
            </div>

            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">


              <ul class="nav navbar-nav navbar-right">
                <li class="hovercheck"><a href="<?php web_url() ?>">Home</a></li>
                <li class="hovercheck"><a href="<?php web_url() ?>/medical-collections.php">Medical</a></li>
                <li class="hovercheck"><a href="<?php web_url() ?>/hoa-collections.php">HOA&#8217;s</a></li>
                <li class="hovercheck"><a href="<?php web_url() ?>/government-collections.php">Government</a></li>
                <li class="hovercheck"><a href="<?php web_url() ?>/cash-recovery-system.php">Our Approach</a></li>
              </ul>
            </div><!-- /.navbar-collapse -->
          </div><!-- /.container-fluid -->
        </div>
      </nav>
  </header>
</div>

风格：

*{
  font-family: 'arial';
}
body,html{height: 100%;}
.topbar{
  min-height: 26px;
  padding: 12px 0;
  border-bottom: 1px solid #f3f3f3;
}

.topbar a:hover{
  color: #e4744f;
}

.link{
  color: #3399cc;
  font-size: 20px;
  display: inline;
  margin: 0px 6px;
  text-transform: uppercase;
  font-weight: normal;
}

a:hover{
  text-decoration: none;
}

.topbar .social{
  float: right;
  margin-right: 10px;
}

.topbar .social a{
  padding: 6px;
  margin-left: 1px 4px;
  height: 18px;
  float: left;
}

.social i{
  padding-left: 10px;
  font-size: 20px;
  color: #9c9c9c;
}

.fa-facebook:hover{
  color: #3b5998;
}

.fa-linkedin:hover{
  color: #0077b5;
}

/* HEADER  */
#header { border-bottom: 4px solid #f0f0f0; margin:0;}

nav{
  height: 100%;
}

.navbar-default{
  background-color: white;
}

.navbar-brand{
  /*margin-left: 50%;*/
}

.hovercheck:hover{
  border-bottom: 4px solid #307ec1;
  background-color: #cee7fc;
}

.navbar{
  margin-bottom: 0px;
}

.center{
  text-align: center;
}

.highlight{
  font-family: 'Microsoft JhengHei', 'arial';
  font-size: 38px;
  padding: 20px 0px;
  margin: 0px;
}

.round{
  border-radius: 50%;
  margin: 15px 0px;
}

.description{
  text-align: justify;
}

.description p{
  text-indent: 15px;
}
.subtitle{
  margin-top: 50px;
  font-size: 18px;
}

.subtitle hr{ margin: 50px 0px}
.col-xs-12 h3{ margin-top: 0px;}
.bando{color:#3399cc;}
.bando:hover{color:#e4744f;}
.foot{text-indent: 15px; padding-bottom: 15px;}
.imgBanner{background-size: contain; max-height: 385px; height: 50%; background-repeat: no-repeat; width: 100%; max-width: 1440px; margin: 0px auto;}
.bannerTxt{padding: 50px 60px 0px 0px; color: #307ec1; float: right;}
.bannerTxtMedical{padding: 50px 0px 0px 60px; color:#307ec1; float: left; }
.fullBanner{height: 110px;}
.shrinkBanner{height: 64px;}
.nav li a { margin: 0px; display: block; width: 100%; height: 100%; }
.nav li a{display: flex; justify-content: flex-end; align-items: flex-end; height: 105px;}
.fulla{height: 105px}
.shorta{height: 60px !important}
ul.bottom_links{ list-style: none;}
ul.bottom_links li{display: inline; padding-left: 20px;}
.footer_right{display: inline-block; float: right;}
.imgBanner h2{font-size: 38px; margin-bottom: 0px;}
.imgBanner h3{font-size: 28px; margin-top: 0px;}
.aftrHighlight{ margin-top: 0px; border: 1px solid #f0f0f0}
.navwidth{max-width: 1000px; margin: 0px auto;}

Answer 1

如果你改变：

.fullBanner {height：110％;} / *将px更改为％* /

你的问题应该解决

Answer 2

您可以使用z-index，因为我认为文本“Recover more revnue”或横幅的值比导航下拉列表更多z-index。或指定background-color导航下拉列表，我认为您没有使用任何background-color下拉列表。

CSS更改（从锚标记中移除高度并指定背景颜色）：

.nav { background-color:#fff;}
.nav li a { margin: 0px; display: block; width: 100%; }
.nav li a{display: flex; justify-content: flex-end; align-items: flex-end;}

这是您的更新小提琴链接

<强> working example

Bootstrap Navbar bug：允许下面的文本显示导航栏何时展开

2 个答案: