0
Wie kann ich den Hamburger aus Bootstrap Navbar-toggle Ich möchte es in eine X-Taste ändern, so dass wenn ich klicke es die SideNav beim Schieben nach links, auch wenn ich in das rote Rechteck wie das Sitenav zusammenbrechen? danke 
Seitennavigation Bootstrap
hier ist mein Code unten
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<style>
.indexcity {
z-index: 99999;
}
body {
background-color: lightblue;
}
@media screen and (max-width: 767px) {
#logo{
text-align: right;
float: right;
margin-right: 40%;
}
#opt_menu{
float:left;
}
.navbar-collapse{
background-color:#847e6e;
position: fixed;
top: 0;
transition: all .25s ease-out;
height: 100%;
width: 70%;
right: 800px;
opacity: 50%;
box-shadow:0 0 25px #08090a;
}
.navbar-fixed-top .navbar-nav>li>a {
color: #000;
}
.right {
right: 0 !important;
left: 0 !important;}
}
.navbar-fixed-bottom .navbar-collapse, .navbar-fixed-top .navbar-collapse{
max-height: 100%;
}
</style>
</head>
<body>
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class= "container">
<a href = "#" class= "navbar-brand" id="logo">Test</a>
<button class = "navbar-toggle" id="opt_menu">
<span class="sr-only">Toggle navigation</span>
<span class= "icon-bar"> </span>
<span class= "icon-bar"> </span>
<span class= "icon-bar"> </span>
</button>
<div class = "navbar-collapse" >
<ul class ="nav navbar-nav navbar-right">
<li> <a href="#">Link0</a></li>
<li class ="dropdown">
<a href="#" class ="dropdown-toggle" data-toggle ="dropdown">Link1<b class ="caret"></b></a>
<ul class = dropdown-menu>
<li><a href="#">Link1</a> </li>
<li><a href="#">Link2</a> </li>
<li><a href="#">Link3</a> </li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<script>
/*
function openNav() {
document.getElementById("mySidenav").style.width = "250px";
}
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
}*/
jQuery(function($){
$('.navbar-toggle').click(function(){
$('.navbar-collapse').toggleClass('right');
$('.navbar-toggle').toggleClass('indexcity');
$('body').toggleClass('changecolor');
});
});
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>
Mögliches Duplikat [Wie ein offenes kollabierten navbar zu schließen, wenn sie außerhalb des navbar Elements in Bootstrap 3 klicken?] (Http://stackoverflow.com/questions/23764863/how-to-close- an-auf-eingeklappt-navbar-wenn-klick-außerhalb-der-navbar-elemen) –