I'm looking to adjust the color of my logo when the menu button is clicked to match the overlay style.
Currently, I managed to switch from a black logo to a white logo. However, when attempting to close the menu, it doesn't revert back to the black logo as intended in my JavaScript function.
Any assistance would be greatly appreciated.
function menuButton(x) {
x.classList.toggle("change");
}
function toggleNav() {
var x = document.getElementById("myNav");
if (x.style.height === "100%") {
x.style.height = "0%";
} else {
x.style.height = "100%";
}
}
function changeImg() {
var logo = document.getElementById("logo");
if (logo.src == "/images/1x/White.png") {
logo.src = "/images/1x/Asset 1.png";
} else {
logo.src = "/images/1x/White.png";
}
}/* CSS Styles */
.white {
color: #fff
}
html,
body {
margin: 0;
padding: 0;
}
header {
/* Header Styles */
}
.container {
/* Container Styles */
}
header .logo {
/* Logo Styles */
}
header .menu {
/* Menu Styles */
}
.bar1,
.bar2,
.bar3 {
/* Bar Styles */
}
.change .bar1 {
/* Change Bar Styles */
}
.overlay {
/* Overlay Styles */
}
.overlayContent {
/* Overlay Content Styles */
}
.overlay a {
/* Overlay Link Styles */
}<link href="https://fonts.googleapis.com/css?family=Raleway" type="text/css" rel="stylesheet">
<!-- HTML Markup -->
<header id="top">
<div class="container">
<div class="logo">
<a href="#top" class="logo"><img id="logo" src="/images/1x/Asset 1.png" alt="Logo"></a>
</div>
<div class='menu' onclick="menuButton(this); toggleNav(); changeImg()">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</div>
<div class="container">
<nav id="myNav" class="overlay">
<div class="overlayContent">
<a href="#">Item 1</a>
<a href="#">Item 2</a>
<a href="#">Item 3</a>
<a href="#">Item 4</a>
<a href="#">Item 5</a>
</div>
</nav>
</div>
</div>
</header>
<div id="showcase">
</div>