I have a problem with my navbar. When the screen is small a Button appear, but when I press the button nothing happens.
This is my code and i don't really know why the button in the Navebar doesn't do anything.
body {
font-family: Verdana;
// letter-spacing: 1px;
}
#header,
h1 {
// color: #6f6f6f;
color: #fff;
font-size: 24px;
}
container {
margin-left: auto;
margin-right: auto;
}
#header {
margin-top: 50px;
margin-left: auto;
margin-right: auto;
width: 100%;
height: 200px;
padding-top: 10px;
background: rgb(26, 84, 155);
background: -moz-linear-gradient(45deg, rgba(26, 84, 155, 1) 0%, rgba(125, 185, 232, 1) 100%);
background: -webkit-gradient(linear, left bottom, right top, color-stop(0%, rgba(26, 84, 155, 1)), color-stop(100%, rgba(125, 185, 232, 1)));
background: -webkit-linear-gradient(45deg, rgba(26, 84, 155, 1) 0%, rgba(125, 185, 232, 1) 100%);
background: -o-linear-gradient(45deg, rgba(26, 84, 155, 1) 0%, rgba(125, 185, 232, 1) 100%);
background: -ms-linear-gradient(45deg, rgba(26, 84, 155, 1) 0%, rgba(125, 185, 232, 1) 100%);
background: linear-gradient(45deg, rgba(26, 84, 155, 1) 0%, rgba(125, 185, 232, 1) 100%);
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#1a549b', endColorstr='#7db9e8', GradientType=1);
}
table {
float: left;
}
.beschreibung {
width: 100%;
float: left;
}
.text {
float: left;
}
.person {
float: left;
margin-top: 20px;
border-width: 1px;
border-style: solid;
border-color: #8ec6f7;
padding: 2.5em;
border-radius: 5px;
text-align: justify;
}
.download {
background-color: #8ec6f7;
border-radius: 10px;
width: 100px;
color: #fff;
}
.footer {
margin-top: 140px;
width: 100%;
height: 200px;
background: #909090;
float: bottom;
}
.footer,
.foo {
color: #fff;
}<!DOCTYPE HTML>
<html>
<head>
<title>TestPage</title>
<link rel="stylesheet" type="text/css" href="style.css">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js">
</script>
<meta charset="utf-8" />
<link rel="icon" type="image/png" href="apple_logo.png" />
</head>
<body>
<!--nav bar-->
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="index.html">Home <span class="sr-only">(current)</span></a>
</li>
<li><a href="about_us.html">About us</a>
</li>
<li><a href="downloads.html">Downloads</a>
</li>
</ul>
</div>
</div>
<div class="navbar-header">
</div>
</nav>
<!--header-->
<div id="header">
<div class="container">
<center>
<h1>überschrift</h1>
<h3>unter überschrift</h3>
</center>
</div>
</div>
<!-- body-part -->
<div class="container">
<h2>News</h2>
<hr/>
<div class="line">
<div class="col-xs-6 col-sm-3">
<a href="#" class="thumbnail">
<img src="ip_doesnt_exist.jpg" alt="...">
</a>
</div>
<h4>Example heading</h4>
<p class="text">jal?sdjflkajgl?kadjfl?gkja?lkdfj?lk ja?lksjdf?l j?lkasdjf?lka</p>
<br/>
<br/>
<p><b>1.1.1999</b>
</p>
<br/>
<br/>
<br/>
<hr/>
</div>
<div class="line">
<div class="col-xs-6 col-sm-3">
<a href="#" class="thumbnail">
<img src="ip_doesnt_exist.jpg" alt="...">
</a>
</div>
<h4>Example heading</h4>
<p class="text">jal?sdjflkajgl?kadjfl?gkja?lkdfj?lk ja?lksjdf?l j?lkasdjf?lka</p>
<br/>
<br/>
<p><b>1.1.1999</b>
</p>
<br/>
<br/>
<br/>
<br/>
<hr/>
</div>
<div class="line">
<div class="col-xs-6 col-sm-3">
<a href="#" class="thumbnail">
<img src="ip_doesnt_exist.jpg" alt="...">
</a>
</div>
<h4>Example heading</h4>
<p class="text">jal?sdjflkajgl?kadjfl?gkja?lkdfj?lk ja?lksjdf?l j?lkasdjf?lka</p>
<br/>
<br/>
<p><b>1.1.1999</b>
</p>
<br/>
<br/>
<br/>
<hr/>
</div>
</div>
<div class="footer">
<div class="container">
<br/>
<div class="row">
<div class="col-sm-12 col-md-12">
<a href="#">
<img src="facebook-icon.png" alt="facebook">
<p class="foo">Followe us on Facebook</p>
</a>
</div>
<div class="col-sm-12 col-md-12">
<a href="#">
<img src="google-plus-icon.png" alt="google+">
<p class="foo">Followe us on Google +</p>
</a>
</div>
<div class="col-sm-12 col-md-12">
</div>
</div>
</div>
</div>
</body>
</html>
