Navigation dropdown moving content below not working-CodePudding

I am almost done with my business website https://www.housewashingdelmarva.com/. However, when viewing on my phone and I click the hamburger drop-down menu, the menu goes over my header. I would like it to push the header down when clicked like another website I built https://oceancitymdlawncare.com/. What error did I make?

I am using W3.CSS as my framework.

Thx

<!--Navigation Buttons-->
<div >
    <div >
        <a  href="https://www.housewashingdelmarva.com/"><i ></i></a>
        <a  href="#Services">Power Washing Services</a>
        <a  href="#Testimonials">Testimonials</a> 
        <a  href="#Gallery">Gallery</a> 
        <a  href="#FAQ">FAQ</a> 
        <a  href="#About-Us">About Us</a> 
        <a  href="#Contact-Us">Contact Us</a>
        <a href="javascript:void(0)"  onclick="myFunction('demo')">&#9776;</a>
    </div>

<!-- Navbar on small screens (remove the onclick attribute if you want the navbar to always show on top of the content when clicking on the links) -->
    <div id="demo" >
        <a  href="https://www.housewashingdelmarva.com/" onclick="myFunction()"><i ></i></a> 
        <a  href="#Services">Power Washing Services</a> 
        <a  href="#Testimonials">Testimonials</a>
        <a  href="#Gallery">Gallery</a> 
        <a  href="#FAQ">FAQ</a>
        <a  href="#About-Us">About Us</a> 
        <a  href="#Contact-Us">Contact Us</a>
    </div>
        
</div>
<script>
function myFunction() {
  var x = document.getElementById("demo");
  if (x.className.indexOf("w3-show") == -1) {
    x.className  = " w3-show";
  } else { 
    x.className = x.className.replace(" w3-show", "");
  }
}
</script>

CodePudding user response：

In the one that's working the div you're adding w3-show class to on click of the menu burger is a sibling of the header element and they're both block elements so they sit on top of one another in normal document flow. In the one that's not working, the element you're adding w3-show to is a child of another div that isn't set to display block, and that other div is the sibling of the header element not the div that's being modified by the click event.