That’s because (and this is for the third time of saying) that you haven’t added the code I gave you (properly).
You did add some code but you omitted pieces that I’d given you and changed other pieces that you shouldn’t.
- I told you to place the
icon
class on the button which you didn’t. You need the click associated with the button itself.
. <button type="button" class="navbar-toggle icon" data-toggle="collapse" data-target="#myNavbar">
- I told you to change the div to a span and to add the class of inner-icon. You only did this half right. You left it as a div.
<span class="inner-icon">
<span class="bar1"></span>
<span class="bar2"></span>
<span class="bar3"></span>
</span>
- I did not say change the js to point to .inner-icon because that puts you back exactly where you were and targeting inner button elements. Leave the JS pointing to .icon which is the actual button (a button cannot have two click actions associated with it).
$(".icon").click(function()
etc…
- Adjust the translate measurements to position your arrow better.
Here is the full working code.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style>
.inner-icon {
/*
position:absolute;
top:5%;
right:5%;*/
display: flex;
flex-direction: column;
}
.bar1,
.bar2,
.bar3 {
/*
position:relative;*/
top: 0px;
height: 5px;
width: 35px;
margin: 3px;
background: red;
}
.rotate45dg {
transform: ;
-ms-transform: rotate(45deg);
/* IE 9 */
transform: rotate(45deg) translate(8px, 7px);
}
.shift {}
.rotate-45dg {
-ms-transform: rotate(45deg);
/* IE 9 */
transform: rotate(-45deg) translate(8px, -8px);
}
.opacity {
opacity: 0;
}
.blue {
background: blue;
}
</style>
<script>
$(document).ready(function() {
$(".icon").click(function() {
$(".bar1").toggleClass("blue");
$(".bar1").toggleClass("rotate45dg");
$(".bar2").toggleClass("opacity");
$(".bar3").toggleClass("rotate-45dg");
});
});
</script>
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle icon" data-toggle="collapse" data-target="#myNavbar">
<span class="inner-icon">
<span class="bar1"></span>
<span class="bar2"></span>
<span class="bar3"></span>
</span>
</button>
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Page 1-1</a></li>
<li><a href="#">Page 1-2</a></li>
<li><a href="#">Page 1-3</a></li>
</ul>
</li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
<li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
</ul>
</div>
</div>
</nav>
<div class="container">
<h3>Collapsible Navbar</h3>
<p>In this example, the navigation bar is hidden on small screens and replaced by a button in the top right corner (try to re-size this window).
<p>Only when the button is clicked, the navigation bar will be displayed.</p>
</div>
</body>
</html>