【发布时间】:2020-07-28 09:13:54
【问题描述】:
各位开发者,能否请您帮我解决这个阻止我完成此网站的问题。有人在其浏览器的智能手机视图中查看https://hcbcke.netlify.app/ 并帮助我解决为什么单击时响应式菜单图标没有响应。您可以在https://github.com/kimanicharles911/hope_city_bible_church 下载源代码。下面是 HTML 代码。
<nav class="nav-primary" aria-label="Main">
<div class="wrap">
<div class="responsive-menu-icon"></div>
<ul id="menu-main-menu" class="menu genesis-nav-menu menu-primary responsive-menu">
<li id="menu-item-116" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-home current-menu-item page_item page-item-103 current_page_item menu-item-116">
<a href="#" aria-current="page"><span>Home</span></a>
</li>
<li id="menu-item-115" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-115">
<a href="#"><span>About</span></a>
</li>
<li id="menu-item-112" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-112">
<a href="#"><span>Music</span></a>
</li>
<li id="menu-item-111" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-111">
<a href="#"><span>Training</span></a>
</li>
<li id="menu-item-9230" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-9230">
<a href="#"><span>Blog</span></a>
</li>
<li id="menu-item-3048" class="menu-item menu-item-type-custom menu-item-object-custom social-icon facebook menu-item-3048">
<a target="_blank" rel="noopener noreferrer" href="https://www.facebook.com/hcbcke/">
<span>
<i class="icon-2x icon-facebook"></i>
<span class="fa-hidden">Facebook</span>
</span>
</a>
</li>
<li id="menu-item-3049" class="menu-item menu-item-type-custom menu-item-object-custom social-icon twitter menu-item-3049">
<a target="_blank" rel="noopener noreferrer" href="#">
<span>
<i class="icon-2x icon-twitter"></i>
<span class="fa-hidden">Twitter</span>
</span>
</a>
</li>
<li id="menu-item-3050" class="menu-item menu-item-type-custom menu-item-object-custom social-icon youtube menu-item-3050">
<a target="_blank" rel="noopener noreferrer" href="#">
<span>
<i class="icon-2x icon-youtube"></i>
<span class="fa-hidden">YouTube</span>
</span>
</a>
</li>
<li id="menu-item-6279" class="menu-item menu-item-type-custom menu-item-object-custom social-icon instagram menu-item-6279">
<a target="_blank" rel="noopener noreferrer" href="#">
<span>
<i class="icon-2x icon-instagram"></i>
<span class="fa-hidden">Instagram</span>
</span>
</a>
</li>
<li id="menu-item-8331" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-8331">
<a target="_blank" rel="noopener noreferrer" href="#">
<span>
<i class="fab fa-spotify icon-2x"></i>
</span>
</a>
</li>
<li id="menu-item-8332" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-8332">
<a target="_blank" rel="noopener noreferrer" href="#">
<span>
<i class="fab fa-apple icon-2x"></i>
</span>
</a>
</li>
<li id="menu-item-5105" class="bop-nav-search menu-item menu-item-type-search menu-item-object- menu-item-5105">
<form class="bop-nav-search menu-item menu-item-type-search menu-item-object- menu-item-5105" role="search" method="get" action="#">
<label>
<span class="screen-reader-text">Search</span>
<input type="search" class="search-field" placeholder value name="s" title>
</label>
<input type="submit" class="search-submit" value="Search">
</form>
</li>
</ul>
</div>
</nav>
【问题讨论】:
-
我会质疑
responsive-menu-icon对菜单有何反应?你在使用 JavaScript 吗?这不是标准的引导类。您可以使用 Boostrap 自己的响应式菜单,该菜单将为您提供汉堡菜单。试试看这里的文档:getbootstrap.com/docs/4.0/components/navbar -
您可以在github.com/kimanicharles911/hope_city_bible_church 下载源代码然后试用。您不必安装任何东西。只需在浏览器中运行 index.html。请试试谢谢乔治
标签: javascript html css twitter-bootstrap bootstrap-4