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

Question

当我尝试展开导航栏时，下面的内容会在导航栏中的扩展内容之上传递。有关更多信息，请参阅此图片。

This image shows the problem

还可以，但随着用户开始滚动，导航栏是否自行解决。 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 {身高：110％;}/*更改像素为％*/

您的问题应该解决

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