navbar-Kollaps nicht Abdeckkörper Inhalt

Question

Hier ist meine codepen: https://codepen.io/anon/pen/EvVNjz

Hier ist die Navigation ein Teil meines 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; 
} 

Wenn Sie die Größe reduzieren auf dem Bildschirm, um zur Navigationsschaltfläche zu gelangen, klicken Sie auf die Schaltfläche und dann auf die Dropdown-Liste "Programme". Keines der Drop-Down-Menüs verdeckt den Body-Inhalt. Ich möchte, dass die Dropdown-Navigation alles darunter versteckt.

Ich habe heute viel gesucht, und ich kann nicht herausfinden, warum es nicht funktioniert. Ich bin mir ziemlich sicher, dass es irgendwann funktioniert hat, aber vielleicht habe ich etwas mit CSS geändert, das das Problem verursacht?

Answer 1

Fügen Sie einfach diesen Stil:

.navbar { 
    z-index:99; 
}