0

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 class="w3-top w3-center w3-theme-d5">
    <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/"><i class="fa fa-home"></i></a>
        <a class="w3-bar-item w3-button w3-hover-cyan w3-hide-small" href="#Services">Power Washing 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="#FAQ">FAQ</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')">&#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" class="w3-bar-block w3-clear w3-theme-d3 w3-hide w3-hide-medium w3-hide-large">
        <a class="w3-bar-item w3-button w3-hover-cyan" href="https://www.housewashingdelmarva.com/" onclick="myFunction()"><i class="fa fa-home"></i></a> 
        <a class="w3-bar-item w3-button w3-hover-cyan" href="#Services">Power Washing Services</a> 
        <a class="w3-bar-item w3-button w3-hover-cyan" href="#Testimonials">Testimonials</a>
        <a class="w3-bar-item w3-button w3-hover-cyan" href="#Gallery">Gallery</a> 
        <a class="w3-bar-item w3-button w3-hover-cyan" href="#FAQ">FAQ</a>
        <a class="w3-bar-item w3-button w3-hover-cyan" href="#About-Us">About Us</a> 
        <a class="w3-bar-item w3-button w3-hover-cyan" 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>
jmulchansingh
  • 5
  • 2

1 Answers1

1

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.

wjh18
  • 685
  • 1
  • 6
  • 13
  • So I think I see what's wrong by following your comment. On the site that is not working, should I remove the div that is wrapping around both sets of navigation buttons large and small screen? – jmulchansingh Feb 10 '22 at 02:00