Question posted in 
When I resize the window to mobile-size, the navbar does not collapse and the menu selection icon becomes unresponsive. The navbar fails to center as well. (Sorry my english is not the best).
Here is the page head:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf -8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Bootstrap 101 Template</title>
<!--Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!--HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
Note CSS stylings:
<style>
#header{
text-align: center;
background-color: #add8e6;
width: 100%;
padding-bottom 20px;
top: 0;
position: fixed;
}
.menu {
background-color: white;
line-height:30px;
letter-spacing:1px;
width:100%;
border: 3px solid grey;
}
.content{
position: relative;
}
.fixed{
position:fixed;
z-index:99;
}
@media (min-width: 768px) {
.navbar .navbar-nav {
display: inline-block;
float: none;
vertical-align: top;
background-color:white;
}
.navbar .navbar-collapse {
text-align: center;
}
}
#details{
background-color: blue;
}
#footer{
}
#topContainer{
background-color: green;
}
</style>
</head>
<body >
<header id="header">
<br/>
<div><h1 style="font-size:400%;"><strong>Du suchst eine günstige Mietwohnung in Jena?</strong></h1></div>
<div><h3 style="font-size:200%;">Deine neue 3-Zimmer-Wohnung liegt im 20min entfernten Rothenstein</h3></div>
<br/>
</header>
<div class="content contentContainer" id="topContainer">
<div class="content">
<nav class="menu navbar-default">
<div class="container" >
<div class="navbar-header navbar-default" >
<button type="button" class="navbar-toggle collapsed"
data-toggle="collapse" data-target=".navbar-collapse"
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>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#topContainer">Home</a></li>
<li><a href="#details">About</a></li>
<li><a href="#footer">Download The App</a></li>
</ul>
</div>
</div>
</nav>
</div>
<div id="topContainerContent">
</div>
</div>
<div class="content contentContainer" id="details">
<p> hallo</p>
</div>
<div class="content contentContainer" id="footer">
<img class="img-responsive" style="width: 150%; height: 900px;"src="http://thumbs.dreamstime.com/z/mann-der-laptop-im-b%C3%BCro-verwendet-37942789.jpg">
<p> hallo</p>
</img>
</div>
Plugins:
<!--jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<!--Include all compiled plugins (below), or include individual files asneeded -->
<script src="js/bootstrap.min.js"></script>
<script>
$(".contentContainer").css("min-height",$(window).height());
var headerHeight = $('#header').height();
$('nav').css("marginTop",headerHeight);
$(document).ready(function(){
$(window).bind('scroll', function() {
if ($(window).scrollTop() > headerHeight) {
$('nav').addClass('fixed').css("top", -headerHeight);
$('body').css("marginTop",headerHeight);
}
else {
$('nav').removeClass('fixed');
$('body').css("marginTop","0");
}
});
});
$(window).resize(function(){
$(".contentContainer").css("min-height",$(window).height());
headerHeight = $('#header').height();
$('nav').css("marginTop",headerHeight);
$(document).ready(function(){
$(window).bind('scroll', function() {
if ($(window).scrollTop() > headerHeight) {
$('nav').addClass('fixed').css("top", -headerHeight);
$('body').css("marginTop",headerHeight);
}
else {
$('nav').removeClass('fixed');
$('body').css("marginTop","0");
}
});
});
});
</script>
</body>
</html>
2
Answers
3 Things:
You should include jQuery before Bootstrap, in the
headyou include bootstrap CND but not jQuery, you are declaring jQuery at the end of thebodytag. Move that declaration of bootstrap from the head after the jQuery declaration at the bottomAbout the nav bar not responding:
You have content inside the
imgtag almost at the end of the file:If you are using HTML5 then you should have this:
Or in XHTML this:
Dont place content inside the
imgtag.Include this in your CSS:
Working jsFiddle: http://jsfiddle.net/tLxneqkb/1/
As far as the centering goes you’re using
menuin lieu ofnavbar(the default) so your CSS won’t work since you’re using the following:You also have
navbar-defaultmixed with yournavbar-headerwhich is why yournavbarisn’t holding the white background under 768px.The menu not opening has been addressed by others as far as the dependency order.