I'm having trouble getting my burger icon to display the navigation menu on mobile devices. I've tried adjusting functions in my JavaScript and tweaking the media queries in my CSS file, but the menu still won't show up when the page size is reduced to 812px or less.
Here's a look at my HTML:
<header>
<nav>
<div class="aw-container">
<a href="Home.html"><img class="logo" src="img/logo.jpg" width="60" height="50" alt="logo"></a>
<div id="nav-class" class="aw-burger-open">
<ul class="aw-navigation">
<li><a class="aw-section-home" href="#">Home</a></li>
<li><a class="aw-section-blog" href="#aw-blog">Blog</a></li>
<li><a class="aw-section-link" href="#aw-contact">Travel</a></li>
<li><a class="aw-section-newsletter" href="#aw-newsletter">Contact</a></li>
<li><a class="aw-section-study" href="#aw-study">Planning</a></li>
<li><a class="aw-section-search" href="aw-search">Search</a></li>
</ul>
</div>
<form class="searchbar" method="get">
<input type="text" id="s" placeholder="Search" name="search">
<div class=" close-icon">
<button type="button"><i class="fa fa-close"></i></button>
</div>
</form>
<div id = "burger-menu" class="burger" onclick="myFunction(this);toggleDropdown(this);">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</div>
</nav>
</header>
And here's the relevant CSS:
@media screen and (max-width: 812px) {
ul.aw-navigation{
visibility: hidden;
}
#nav-class{
display: flex;
flex-direction: column;
}
/*Burger Menu */
.burger {
display: inline-block;
cursor: pointer;
}
.bar1, .bar2, .bar3 {
width: 20px;
height: 2px;
background-color: #333;
margin: 6px 0;
transition: 0.4s;
}
.change .bar1 {
-webkit-transform: rotate(-45deg) translate(-4px, 3px);
transform: rotate(-45deg) translate(-4px, 3px);
}
.change .bar2 {opacity: 0;}
.change .bar3 {
-webkit-transform: rotate(45deg) translate(-8px, -8px);
transform: rotate(45deg) translate(-8px, -8px);
}
}
Finally, here's the JavaScript code that controls the burger menu:
//Burger//
function myFunction(x) {
x.classList.toggle("change");
}
function toggleDropdown() {
document.getElementById("nav-class").classList.toggle("show");
}
window.onclick = function(event) {
if (!event.target.matches('.burger')) {
var dropdowns = document.getElementById("nav-class");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
I have not encountered any errors in the console while debugging this issue. The myFunction(), which changes the burger icon to an X symbol, seems to be working fine, but the toggleDropdown() function is not functioning as expected. Any help would be greatly appreciated!