navbar-collapse not covering body content - css

Question

Here is my codepen: https://codepen.io/anon/pen/EvVNjz
Here is the navigation part of my 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:[phone]">
<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;
}
If you reduce the size of the screen to get to the navbar-toggle button, click the button, then click the "Programs" drop-down, none of the drop-down menus is covering up the body content. I want the drop-down navigation to cover up everything below it.
I've searched a lot today, and I can't find out why it's not working. I'm pretty sure it was working at some point, but maybe it's something I changed with CSS that causes the problem?

Answer 1

Just add this style:
.navbar {
z-index:99;
}