Julian Köberle Julian Köberle - 5 months ago 9
HTML Question

Bootstrap Navbar. When I press the button nothing happens

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>




Answer

What is missing is a reference to jquery.js. I created jsfiddle to demonstrate it.

Please note that you need to reference jquery.js before referecing bootstrap.js

Your html head should look like:

<!-- Latest compiled and minified JavaScript -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js">  </script>

Hope this works

Comments