導航欄塌不覆蓋主體內容

Question

這裏是我的codepen：https://codepen.io/anon/pen/EvVNjz

這裏是我的HTML的導航部分：

<nav class="navbar"> 
    <div class="container"> 
     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle" data-toggle="collapse" 
        data-target="#navbar" aria-expanded="false" aria-controls="navbar"> 
       <span class="sr-only">Toggle navigation</span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
      </button> 
      <a asp-area="" asp-controller="Home" asp-action="Index" class="navbar-brand"> 
       <img class="img-responsive" src="~/images/2040_Logo_Nav_255x160.jpg" alt="2040 Logo" /></a> 
     </div> 
     <div id="navbar" class="navbar-collapse collapse"> 
      <div class="row navRow1"> 
       <ul class="nav navbar-nav floatRight"> 
        <li><a class="icons" target="_blank" href="https://www.facebook.com/2040PartnersforHealth"> 
         <img src="~/images/_Layout_Images/icon_facebook.png" class="img-responsive center-image" /></a></li> 
        <li><a class="icons" target="_blank" href="https://twitter.com/2040Health"> 
         <img src="~/images/_Layout_Images/icon_twitter.png" class="img-responsive center-image" /></a></li> 
        <li><a class="icons" href="mailto:admin@2040partnersforhealth.org"> 
         <img src="~/images/_Layout_Images/icon_mail.png" class="img-responsive center-image" /></a></li> 
        <li><a class="icons" href="tel:7202160075"> 
         <img src="~/images/_Layout_Images/icon_phone.png" class="img-responsive center-image" /></a></li> 
       </ul> 
      </div> 

      <div class="row navRow2"> 
       <ul class="nav navbar-nav floatClear"> 
        <li><a asp-area="" asp-controller="Home" asp-action="Index">HOME</a></li> 
        <li><a asp-area="" asp-controller="Home" asp-action="Error">DATA/RESOURCES</a></li> 
        <li><a asp-area="" asp-controller="Home" asp-action="Error">COMMUNITY</a></li> 
        <li class="dropdown"> 
         <a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" 
          asp-area="" asp-controller="Home" asp-action="Error">PROGRAMS <span class="caret"></span></a> 
          <ul class="dropdown-menu"> 
           <li><h5>Student Programs</h5></li> 
           <li><a asp-area="" asp-controller="Home" asp-action="Error">CSTAHR</a></li> 
           <li><a asp-area="" asp-controller="Home" asp-action="Error">Teen Obesity</a></li> 
           <li><a asp-area="" asp-controller="Home" asp-action="Error">Refugee Program</a></li> 

           <li><h5>Current Programs</h5></li> 
           <li><a asp-area="" asp-controller="Programs" asp-action="CBPR">CBPR</a></li> 
           <li><a asp-area="" asp-controller="Programs" asp-action="Upstream">Upstream</a></li> 
           <li><a asp-area="" asp-controller="Home" asp-action="Error">Healthy Sleep</a></li> 

           <li><h5>Past Programs</h5></li> 
           <li><a asp-area="" asp-controller="Home" asp-action="Error">Mental Health</a></li> 
           <li><a asp-area="" asp-controller="Home" asp-action="Error">Kick It Tobacco Teen</a></li> 
           <li><a asp-area="" asp-controller="Home" asp-action="Error">Asthma</a></li> 
          </ul> 
        </li> 
        <li><a asp-area="" asp-controller="Home" asp-action="Summit">2017 SUMMIT</a></li> 
        <li><a asp-area="" asp-controller="Home" asp-action="Error">ABOUT US</a></li> 
       </ul> 
      </div> 
     </div> 

    </div><!-- container end--> 
</nav> 

CSS

/* Screen size changes */ 
@media screen and (max-width: 258px) { 
    /* CSS for smaller logo */ 
    .navbar { 
     height: 90px !important; 
     margin-bottom: 0px !important; 
    } 

    .navbar-brand { 
     width: 120px; 
    } 

    .navbar-collapse { 
     margin-top: 0px; 
     border: none !important; 
    } 
} 

@media screen and (max-width: 420px) { 
    /* 2017 Health Summit header text smaller */ 
    .small-h1 { 
     font-size: 20px !important; 
    } 
} 

@media screen and (max-width: 550px) { 
    /* switch size of whats' new image header */ 
    .whats-new-img { 
     display: none; 
    } 

    .whats-new-small { 
     display: block !important; 
    } 
} 

@media screen and (min-width: 259px) and (max-width: 767px) { 
    /* CSS for smaller logo */ 
    .navbar { 
     height: 140px !important; 
     margin-bottom: 0px !important; 
    } 

    .navbar-brand { 
     width: 200px; 
    } 

    .navbar-collapse { 
     margin-top: 48px; 
    } 
} 

@media screen and (max-width:767px) { 
    /* Submenu headers black font */ 
    .dropdown-menu > li > h5 { 
     color: black !important; 
    } 

    /* CSS for navbar collapse */ 
    .navbar-collapse ul { 
     width: 100% !important; 
    } 

    .navbar-nav { 
     float: none !important; 
     margin-top: 0px !important; 
     margin-bottom: 0px !important; 
     margin-left: 0px !important; 
     margin-bottom: 0px !important; 
    } 

    .navRow1 { 
     display: none; 
    } 

    .nav > li > a:hover, 
    .nav > li > a:focus { 
     color: white !important; 
     background-color: #a09d91 !important; 
     border-bottom: none !important; 
     padding-top: 10px !important; 
    } 

    .nav > li { 
     background-color: #c9c5b6 !important; 
    } 

    .nav > li > a { 
     padding-top: 10px !important; 
     display: block !important; 
     text-align: center !important; 
    } 

    /* 2017 Health Summit header text smaller */ 
    .small-h1 { 
     font-size: 28px; 
    } 

    .padTop40 { 
     padding-top: 0px !important; 
    } 

    /* Padding between Mission & image */ 
    .mission-pad { 
     padding-top: 20px; 
    } 

    /* Don't need that much padding on phone */ 
    .padBot80 { 
     padding-bottom: 20px !important; 
    } 

    /* Smaller Sept 14 image */ 
    .smaller-sept14 { 
     width: 100px; 
    } 
} 

/* Submenu appears on hover */ 
@media screen and (min-width: 768px) { 
    .dropdown:hover .dropdown-menu { 
     display: block; 
    } 
} 

@media screen and (min-width: 768px) and (max-width: 991px) { 
    /* Smaller nav items */ 
    .nav > li > a { 
     font-size: 67%; 
    } 

    .navRow1 { 
     margin-top: 26px !important; 
    } 

    .nav > li > a { 
     padding-top: 11px !important; 
     height: 30px !important; 
    } 

    .navRow2 > ul > li > a:hover, 
    .navRow2 > ul > li > a:focus { 
     border-bottom: 3px solid #6cb645 !important; 
     padding-top: 11px !important; 
    } 

    /* CSS for smaller logo */ 
    .navbar { 
     height: 140px !important; 
     margin-bottom: 0px !important; 
    } 

    .navbar-brand { 
     width: 200px; 
    } 

    .navbar-collapse { 
     margin-top: 0px; 
    } 
} 

@media screen and (min-width: 992px) { 
    .mission-pad { 
     padding-top: 15px; 
    } 

    .vision-pad { 
     padding-top: 30px; 
    } 
} 

@media screen and (min-width: 992px) and (max-width: 1199px) { 
    .nav > li > a { 
     font-size: 90%; 
    } 
} 

@media screen and (min-width: 1200px) { 
    /* nothing */ 
} 

body { 
    font-family: 'Montserrat-Regular', Arial, Helvetica, sans-serif; 
} 

/* Wrapping element */ 
/* Set some basic padding to keep content from hitting the edges */ 
.body-content { 
    margin: 0px 0px 60px 0px; 
    padding: 0px; 
} 

/* Set widths on the form inputs since otherwise they're 100% wide */ 
input, 
select, 
textarea { 
    max-width: 280px; 
} 

.navbar { 
    padding-top: 5px; 
    height: 180px; 
    background-color: white; 
    margin-bottom: 10px; 
    border: 0px !important; 
} 

/* NAVBAR line height is 20px by default so add 30px top and bottom 
to equal the new .navbar-brand 80px height */ 

.nav > li > a { 
    color: black; 
    font-weight: bold; 
    padding-top: 0px; 
    padding-bottom: 0px; 
    height: 41px; 
    vertical-align: middle; 
    display: table-cell; 
} 

.navbar-toggle { 
    padding: 10px; 
    margin: 25px 15px 25px 0; 
    background: #c9c5b6 !important; /*Whatever colour you want for background */ 
} 

.icon-bar { 
    background: white !important; /*Whatever colour you want for icon lines*/ 
} 

.navRow2 > ul > li > a:hover, 
.navRow2 > ul > li > a:focus { 
    background-color: white; 
    border-bottom: 5px solid #6cb645; 
    padding-top: 5px; 
} 

.nav > li > a.icons:hover, 
.nav > li > a.icons:focus { 
    background-color: white; /*Change rollover cell color here*/ 
} 

.navbar-brand { 
    padding-top: 10px !important; 
} 

.navbar-collapse { 
    padding-bottom: 0px !important; 
} 

.navRow1 { 
    padding-right: 6px; 
    margin-top: 70px; 
    padding-bottom: 5px; 
} 

footer { 
    color: white; 
    padding: 5px 15px 25px 15px; 
    background-color: #4c4c4c; 
} 

.glyphicon { 
    font-size: 15px; 
} 

footer ul { 
    display: inline-flex; 
    list-style-type: none; 
    margin-left: 0; 
    padding-left: 0px; 
} 

.liText { 
    font-size: 15px; 
    margin-left: 5px; 
    vertical-align: text-bottom; 
} 

footer h4 { 
    color: #6cb645; 
    padding: 10px 0 10px 10px; 
} 

.footCol { 
    padding-left: 10px; 
    padding-right: 10px; 
} 

.btn-brown { 
    margin-top: 10px; 
    color: black; 
    background: #c9c5b6; 
} 

.btn-brown:hover, 
.btn-brown:focus { 
    color: white; 
    text-decoration: none; 
    background-color: #a09d91; /*Change rollover cell color here*/ 
} 

.w-100 { 
    width: 100%; 
} 

.w-50 { 
    width: 50%; 
} 

.panel.panel-green { 
    border-radius: 0px; 
    border-color: #dfdfdf; 
} 

.panel.panel-green .panel-heading { 
    border-radius: 0px; 
    color: black; 
    background-color: #a7d38f; 
    padding-left: 25px; 
} 

.panel.panel-green .panel-body { 
    background-color: #F2F2F2; 
    color: #4D4D4D; 
    padding-left: 25px; 
    padding-right: 25px; 
} 

.resourcesButtons { 
    margin-bottom: 20px; 
} 

.icons { 
    display: inline-flex; 
    padding-left: 5px !important; 
    padding-right: 5px !important; 
} 

.floatRight { 
    float: right; 
} 

.floatClear { 
    float: right; 
    clear: both; 
} 

.padBot10 { 
    padding-bottom: 10px; 
} 

.padBot20 { 
    padding-bottom: 20px; 
} 

.padBot80 { 
    padding-bottom: 80px; 
} 

.padTop { 
    padding-top: 20px; 
} 

.padTop40 { 
    padding-top: 40px; 
} 

.margLeft { 
    margin-left: 5px; 
} 

.copyright { 
    background-color: #6f6f6f; 
    padding: 10px; 
    color: black; 
} 

.dropdown-menu > li > a:hover, 
.dropdown-menu > li > a:focus { 
    background-color: white !important; 
} 

.dropdown-menu > li > h5 { 
    padding: 10px 0px 10px 15px; 
    font-weight: bold; 
    color: #6cb645; 
    margin: 0px !important; 
} 

/* Remove border on dropdowns */ 
.navbar-nav > li > .dropdown-menu { 
    border: none !important; 
    padding: 0px !important; 
} 

/* Container top & bottom margin */ 
.topBotMargin { 
    margin-top: 20px; 
    margin-bottom: 20px; 
} 

/* Carousel */ 
/* Make .svg files in the carousel display properly in older browsers */ 
.carousel-inner .item img[src$=".svg"] { 
    width: 100%; 
} 

.red-text { 
    color: #c75c5c; 
} 

.mission-vision { 
    font-weight: bold; 
    font-size: 20px; 
    color: #4d91bb; 
} 

.whats-new-small { 
    display: none; 
} 

如果減少的大小進入導航欄切換按鈕的屏幕，單擊按鈕，然後單擊「程序」下拉列表，下拉菜單中沒有任何內容覆蓋正文內容。我想要下拉導航來掩蓋它下面的所有內容。

我今天搜了很多，我找不到它爲什麼不工作。我很確定它在某個時間點工作，但也許這是我用CSS改變了導致問題的東西？

Answer 1

只需添加這種風格：

.navbar { 
    z-index:99; 
}