I built a simple website for my business in w3.css from w3schools.com; https://www.housewashingdelmarva.com/
However, when the website is reduced to mobile phone size and the navigation goes to the 3 stacked bars, I can't get it to click and lower the menu. I believe it's a javascript issue. But I am mostly a front-end CSS and HTML designer. Not sure what I have mistakenly done wrong as I have built two other similar sites that work fine mobile-wise and can't see the difference in the code.
If any javascript coders or w3.css designers notice my mistake, I would appreciate your help.
Thx!
You forgot to add 'demo' id in myFunction during onClick event on Hamburger icon. Click here to see the image where the problem is highlighted.
<div class="w3-bar w3-theme-d3 w3-round-xxlarge">
<a class="w3-bar-item w3-button w3-hover-cyan" href="https://www.housewashingdelmarva.com/">Home</a>
<a class="w3-bar-item w3-button w3-hover-cyan w3-hide-small" href="#Services">Services</a>
<a class="w3-bar-item w3-button w3-hover-cyan w3-hide-small" href="#Testimonials">Testimonials</a>
<a class="w3-bar-item w3-button w3-hover-cyan w3-hide-small" href="#Gallery">Gallery</a>
<a class="w3-bar-item w3-button w3-hover-cyan w3-hide-small" href="#Area-Partners">Our Area Partners</a>
<a class="w3-bar-item w3-button w3-hover-cyan w3-hide-small" href="#FAQ">FAQ</a>
<a class="w3-bar-item w3-button w3-hover-cyan w3-hide-small" href="#Service-Area">Service Area</a>
<a class="w3-bar-item w3-button w3-hover-cyan w3-hide-small" href="#About-Us">About Us</a>
<a class="w3-bar-item w3-button w3-hover-cyan w3-hide-small" href="#Contact-Us">Contact Us</a>
<a href="javascript:void(0)" class="w3-bar-item w3-button w3-right w3-hide-large w3-hover-cyan w3-hide-medium" onclick="myFunction('demo')">☰</a>
</div>