W3.CSS 和 Javascript 导航栏问题

Question

我在 w3.css 从 w3schools.com 为我的企业建立了一个简单的网站； https://www.housewashingdelmarva.com/

但是，当网站缩小到移动设备 phone 大小并且导航转到 3 个堆叠栏时，我无法点击并降低菜单。我认为这是一个 javascript 问题。但我主要是一名前端 CSS 和 HTML 设计师。不确定我做错了什么，因为我已经建立了另外两个类似的网站，它们在移动设备上运行良好，并且看不出代码中的差异。

如果有 javascript 编码人员或 w3.css 设计师注意到我的错误，我将不胜感激。

谢谢！

Answer 1

您忘记在汉堡图标上的 onClick 事件期间在 myFunction 中添加 'demo' id。 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>

W3.CSS 和 Javascript 导航栏问题

W3.CSS and Javascript navigation bar Issue

html

javascript

css

w3.css