My side navigation menu is giving me some trouble. It opens up just fine when I click the button, but it won't close back up when I click it again. The button is supposed to toggle between opening and closing the side navigation.
I've looked at similar threads on this forum and tried using the code provided by others, but it's not working in my specific case.
Additionally, I'm trying to change the shape of the button from ☰ to X whenever the side navigation is extended or retracted. The button changes its shape correctly every time, so that part is working fine.
Thanks for any help you can offer!
Here is the relevant HTML:
<div class = "icon" onclick = "Change(this)">
<div class = "bar1"></div>
<div class = "bar2"></div>
<div class = "bar3"></div>
</div>
<div id = "mysideNav" class = "sideNav">
<a href = "#"> About the bank </a>
<a href = "#"> Mission </a>
<a href = "#"> Vision </a>
<a href = "#"> Why us? </a>
<a href = "#"> Contacts </a>
</div>
CSS:
.icon
{
display: inline-block;
cursor: pointer;
}
.bar1, .bar2, .bar3
{
width: 35px;
height: 5px;
background-color: #333;
margin: 6px 0;
transition: 0.4s;
}
.change .bar1
{
-webkit-transform: rotate(-45deg) translate(-9px, 6px);
transform: rotate(-45deg) translate(-9px, 6px);
}
.change .bar2
{
opacity: 0;
}
.change .bar3
{
-webkit-transform: rotate(45deg) translate(-8px, -8px);
transform: rotate(45deg) translate(-8px, -8px);
}
.sideNav
{
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: auto;
left: 0;
background-color: #111;
overflow-x: hidden;
padding-top: 60px;
transition: 0.5s;
}
.sideNav a
{
padding: 15px 32px 15px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s
}
.sideNav a:hover, .offcanvas a:focus
{
color: #f1f1f1;
}
Javascript:
function Change(x)
{
var mynav = document.getElementById("mysideNav");
x.classList.toggle("change");
if (mynav.style.width = "0px")
{
mynav.style.width = "250px";
}
else
{
mynav.style.width = "0px";
}
}