css - navbar-collapse not covering body content -
here codepen: https://codepen.io/anon/pen/evvnjz
here navigation part of 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 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 , (max-width: 258px) { /* css smaller logo */ .navbar { height: 90px !important; margin-bottom: 0px !important; } .navbar-brand { width: 120px; } .navbar-collapse { margin-top: 0px; border: none !important; } } @media screen , (max-width: 420px) { /* 2017 health summit header text smaller */ .small-h1 { font-size: 20px !important; } } @media screen , (max-width: 550px) { /* switch size of whats' new image header */ .whats-new-img { display: none; } .whats-new-small { display: block !important; } } @media screen , (min-width: 259px) , (max-width: 767px) { /* css smaller logo */ .navbar { height: 140px !important; margin-bottom: 0px !important; } .navbar-brand { width: 200px; } .navbar-collapse { margin-top: 48px; } } @media screen , (max-width:767px) { /* submenu headers black font */ .dropdown-menu > li > h5 { color: black !important; } /* css 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 > { 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 padding on phone */ .padbot80 { padding-bottom: 20px !important; } /* smaller sept 14 image */ .smaller-sept14 { width: 100px; } } /* submenu appears on hover */ @media screen , (min-width: 768px) { .dropdown:hover .dropdown-menu { display: block; } } @media screen , (min-width: 768px) , (max-width: 991px) { /* smaller nav items */ .nav > li > { font-size: 67%; } .navrow1 { margin-top: 26px !important; } .nav > li > { 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 smaller logo */ .navbar { height: 140px !important; margin-bottom: 0px !important; } .navbar-brand { width: 200px; } .navbar-collapse { margin-top: 0px; } } @media screen , (min-width: 992px) { .mission-pad { padding-top: 15px; } .vision-pad { padding-top: 30px; } } @media screen , (min-width: 992px) , (max-width: 1199px) { .nav > li > { font-size: 90%; } } @media screen , (min-width: 1200px) { /* nothing */ } body { font-family: 'montserrat-regular', arial, helvetica, sans-serif; } /* wrapping element */ /* set basic padding keep content hitting edges */ .body-content { margin: 0px 0px 60px 0px; padding: 0px; } /* set widths on 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 20px default add 30px top , bottom equal new .navbar-brand 80px height */ .nav > li > { 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 want background */ } .icon-bar { background: white !important; /*whatever colour want 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 carousel display 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 reduce size of screen navbar-toggle button, click button, click "programs" dropdown, none of dropdown menu covering body content. want dropdown navigation cover below it.
i've searched lot today, , can't find out why it's not working. i'm pretty sure working @ point, maybe it's changed css causes problem?
thank you!
just add style:
.navbar { z-index:99; } 
Comments
Post a Comment