为什么导航栏汉堡图标（hamburger icon）可点击却突然不可见

问题原因 #

你站点使用的Bootstrap v4 alpha测试版CSS资源已停止维护，内置的navbar-toggler-icon汉堡图标样式失效，加上页面重复加载了多个版本的jQuery、Bootstrap脚本存在冲突，导致图标无法正常渲染，按钮功能本身是可用的，所以点击对应位置仍能触发菜单。

修复方案 #

你按以下步骤修改代码即可，不需要掌握前端开发知识：

1. 替换头部的Bootstrap CSS链接
   将原有<link href="https://v4-alpha.getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet">替换为稳定的正式版资源：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">

2. 删除冗余代码：

• 移除最顶部的空导航栏代码：

<nav class="navbar fixed-top navbar-dark bg-dark">
    <a class="navbar-brand" href=""></a>  
</nav>

• 移除重复加载的多余脚本：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

3. 兜底方案：如果修改后图标仍然不显示，直接将汉堡按钮的span标签替换为内置图标的内联样式代码，完全不依赖外部资源：
   将原有<span class="navbar-toggler-icon"></span>替换为：

<span class="navbar-toggler-icon" style="display: inline-block; width: 1.5em; height: 1.5em; vertical-align: middle; background: no-repeat center center; background-size: 100% 100%; background-image: url('data:image/svg+xml;charset=utf8,%3Csvg viewBox=\'http://www.w3.org/2000/svg\' width=\'30\' height=\'30\'%3E%3Cpath stroke=\'rgba(255,255,255,1)\' stroke-width=\'2\' stroke-linecap=\'round\' d=\'M4 7h22M4 15h22M4 23h22\'/%3E%3C/svg%3E');"></span>

内容的提问来源于stack exchange，提问作者LuisC329