Bootstrap Nav menu doesn't pull down the parent div on toggle
Question
i put in my nav section a menu with the classic bootstrap responsive menu with toggable button on small screen. My problem is that when i toggle the button to show the menu the parent div with id= contents doesn't go down but the menu overflow the div. How can i fix it?
Here is the code
<body>
<nav id="header" class="navbar navbar-default">
<div class="container">
<!-- 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="#navmenu" 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 id="logo" src="images/art-of-hair.png"></a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div id="navmenu" class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active"><a href="#">Home<span class="sr-only">Home</span></a></li>
<li><a href="#">Hair<br>Styles</a></li>
<li class=""><a href="#" class="">About</a></li>
<li class=""><a href="#" class="">Contact</a></li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<div id="contents">
<div class="jumbotron">
<h4>We bring out your beauty...</h4>
<h6>Set an appointment</h6>
<p><a class="btn btn-lg" href="tel:5671234009" role="button"><span class="glyphicon glyphicon-earphone"></span>567-1234-009</a></p>
</div> <!-- End Jumbotron -->
<div id="featured">
</div> <!-- #featured -->
</div> <!-- #contents -->
<div id="footer">
</div> <!-- #footer -->
<script src="js/jquery-2.1.4.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<!-- <script src="js/main.js"></script> -->
</body>
and here the css:
/** {
margin: 0;
}*/
body {
font-family: 'Alice', serif;
}
/****************** Nav Section ************************/
nav#header {
background:url('../images/header.png') no-repeat;
/*min-height:200px;*/
color:#fff;
margin-bottom:0;
}
#logo {
width: 300px;
height:150px;
}
#navmenu {
margin:0px 120px 0 0;
color: #fff;
}
ul.nav.navbar-nav.navbar-right li {
background-color: #301b14;
height:180px;
font-weight: bold;
text-transform: uppercase;
margin:10px;
border-radius: 5px;
text-align: center;
}
ul.nav.navbar-nav.navbar-right li a {
color: #fff;
font-weight: bold;
text-transform: uppercase;
position: relative;
top: 35%;
left: 0;
padding-top: 5px;
}
ul.nav.navbar-nav.navbar-right li.active {
color: #301b14;
background-color: #e4dfc1;
border-radius: 5px;
}
ul.nav.navbar-nav.navbar-right li.active a{
color: #301b14;
background-color: #e4dfc1;
border-radius: 5px;
}
ul.nav.navbar-nav.navbar-right li:hover {
color: #301b14;
background-color: #e4dfc1;
border-radius: 5px;
}
ul.nav.navbar-nav.navbar-right li a:hover {
color: #301b14;
background-color: #e4dfc1;
border-radius: 5px;
}
/****************** End Nav Section ************************/
/****************** Content Section ************************/
.jumbotron {
letter-spacing: 2px;
background: url('../images/jumbo-1000.jpeg') no-repeat center;
height:559px;
margin:0;
border-top: 10px solid rgba(48,27,20,0.9);
border-bottom: 10px solid rgba(48,27,20,0.9);
}
.jumbotron h6, .jumbotron h4 {
text-align: right;
color:#fff;
font-size: 200%;
margin-right: 20px;
margin-top: 60px;
}
.jumbotron p {
text-align: right;
font-size: 300%;
margin-right: 20px;
margin-top: 0px;
}
div.jumbotron p a.btn.btn-lg{
background-color: #E4DFC1;
color:#301B14;
border:2px solid #301B14;
font-weight: bold;
-webkit-transition: font-size 1s; /* For Safari 3.1 to 6.0 */
transition: font-size 1s;
}
div.jumbotron p a.btn.btn-lg:hover{
font-size: 0.8em;
}
.jumbotron p a span{
margin: 6px;
}
/****************** End Content Section ************************/
/****************** Footer Section ************************/
/****************** End Footer Section ************************/
/********** Large devices only **********/
@media (min-width: 1200px) {
}
/********** Medium devices only **********/
@media (min-width: 992px) and (max-width: 1199px) {
/* Header */
/* End Header */
/* Home Page */
/* End Home Page */
}
/********** Small devices only **********/
@media (min-width: 768px) and (max-width: 991px) {
/* Home Page */
#navmenu {
margin:30px 0px 0 0;
color: #fff;
}
.jumbotron {
background: url('../images/jumbo-900.jpeg') no-repeat center;
height:416px;
margin:0;
}
}
/********** Extra small devices only **********/
@media (max-width: 767px) {
/* Header */
#navmenu {
margin:150px 0 0 0;
color: #fff;
background-color: #886744;
}
ul.nav.navbar-nav.navbar-right li a {
color: #fff;
font-weight: bold;
text-transform: uppercase;
}
ul.nav.navbar-nav.navbar-right li {
background-color: #301b14;
font-weight: bold;
text-transform: uppercase;
margin:1px;
border-radius: 0 5px 5px 5px;
height: auto;
}
/* End Header */
/* Contents */
/*#contents {
margin-top:180px;
}*/
.jumbotron {
background: url('../images/jumbo-770.jpeg') no-repeat center;
height:297px;
margin:0;
}
/* End Contents */
/* Footer */
/* End Footer */
/* Home Page */
}
/********** Super extra small devices Only :-) (e.g., iPhone 4) **********/
@media (max-width: 479px) {
/* Header */
#logo {
width: 150px;
height:90px;
}
nav#header {
height:120px;
}
#navmenu {
margin:68px 0 0 0;
color: #fff;
background-color: #886744;
}
ul.nav.navbar-nav.navbar-right li {
background-color: #301b14;
font-weight: bold;
text-transform: uppercase;
margin:1px;
border-radius: 0 5px 5px 5px;
}
/* End Header */
/* Home page */
/*#contents {
margin-top:180px;
}*/
.jumbotron {
background: url('../images/jumbo-480.jpeg') no-repeat center;
height:185px;
margin:0;
}
}
1 answers
solution1
1 2016-11-22 11:57:15
Because you have defined:
#header {
height: 200px;
}
instead of that, if you want at least 200px height of your #header section then you can do as:
#header {
min-height: 200px;
}
Code Snippet
* { margin: 0; } body { font-family: 'Alice', serif; } #header { min-height: 200px; } #logo { width: 300px; height: 150px; } #navmenu { margin: 30px 120px 0 0; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> <nav id="header" class="navbar navbar-default"> <div class="container"> <!-- 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="#navmenu" aria-expanded="false" aria-controls="navmenu"> <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 id="logo" src="images/art-of-hair.png"> </a> </div> <!-- Collect the nav links, forms, and other content for toggling --> <div id="navmenu" class="collapse navbar-collapse navbar-right"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Home<span class="sr-only">Home</span></a> </li> <li><a href="#">Hair Styles</a> </li> <li class=""><a href="#" class="">About</a> </li> <li class=""><a href="#" class="">Contact</a> </li> </ul> </div> <!-- /.navbar-collapse --> </div> <!-- /.container-fluid --> </nav>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
bootstrap drop down menu doesn't open
How to toggle bootstrap nav menu on window resize
Bootstrap navbar drop-down doesn't toggle
Bootstrap 3: toggle off-canvas navigation menu doesn't work
Toggle Menu won't close on nav click
div vision toggle from drop down menu
Create a pull down menu / div in JavaScript
Bootstrap3 dropdown menu toggle collapse div
Bootstrap toggle doesn't work
bootstrap navbar doesn't toggle
Related Tags