导航下拉菜单移动下面的内容不起作用

Question

我的企业网站即将完成 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/。我犯了什么错误？

我正在使用 W3.CSS 作为我的框架。

感谢

<!--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>

Answer 1

在工作的 div 中，您将 w3-show class 添加到单击菜单汉堡是 header 元素的兄弟元素，它们是两个块元素，因此它们在正常文档流中位于彼此之上。在那个不起作用的元素中，您要添加 w3-show 的元素是另一个未设置为显示块的 div 的 child，而另一个 div 是header 元素的同级元素，而不是被点击事件修改的 div 元素。

导航下拉菜单移动下面的内容不起作用

Navigation dropdown moving content below not working

html

javascript

css

w3.css