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

Question

我的商业网站https://www.housewashingdelmarva.com/ 几乎完成了。但是，当在我的手机上查看并单击汉堡包下拉菜单时，菜单会出现在我的标题上方。我希望它像我建立的另一个网站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 类是标题元素的兄弟元素，它们都是块元素，因此它们在普通文档中彼此重叠流动。在一个不起作用的元素中，您要添加 w3-show 的元素是另一个未设置为显示块的 div 的子元素，而另一个 div 是标题元素的兄弟元素，而不是被修改的 div点击事件。