Question

在我的网站http://www.dealmazing.com

如果我在移动设备上查看我的网站，虽然您可以点击该区域以切换/展开菜单，但折叠图标会消失。

以下是我的导航相关HTML代码：

<nav class="navbar navbar-expand-lg justify-content-between navbar-dark bg-primary royalblue">
     <div class="container">
       <a class="navbar-brand" href="{% url 'home' %}"><img src="{% static 'images/dealmazing_logo.png' %}" class="img-fluid" style="height:50px;" alt="dealmazing deals logo"></a>
         <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>

我最近压缩了我的CSS和JS，我认为切换图标的格式可能存在问题，但我不确定如何修复它。

我确实将此代码添加到我的自定义CSS中，但似乎无法正常工作

.navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255,255,255, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}

有人对此有任何想法吗？

Answer 1

图片网址应为：

data:image/svg+xml;charset=utf8,%3Csvg%20viewBox='0%200%2030%2030'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20stroke='rgba(255,%20255,%20255,%200.5)'%20stroke-width='2'%20stroke-linecap='round'%20stroke-miterlimit='10'%20d='M4%207h22M4%2015h22M4%2023h22'/%3E%3C/svg%3E

或在本地存储图像以使用它。

Bootstrap Navbar折叠图标未显示

1 个答案: