Is there a way to change the hamburger icon in Bootstrap's navbar-toggle to an X button? I want the side nav to slide to the left when clicked, and also collapse when clicking inside the red rectangle. Thank you. https://i.sstatic.net/nQMGs.png
Code snippet below:
<!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>