Question

我使用bootstrap（4）但是小视口的导航栏没有显示汉堡包图标。我认为问题可能是资产没有正确加载，但我可以看到它在chrome dev工具中获取 - ＆gt;网络。

（网站基于此模板 https://wrapbootstrap.com/theme/velocity-for-products-bootstrap-4-WB0N38R04）

Navbar html

<header id="header" class="header navbar-fixed-top">
    <div class="container">
      <h1 class="logo">
        <a href=""><span class="text">Cheaper</span></a>
      </h1><!--//logo-->
      <nav class="main-nav navbar navbar-right navbar-inverse navbar-expand-md" role="navigation">
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-collapse">
          <span class="navbar-toggler-icon"></span>
        </button><!--//nav-toggle-->

        <div id="navbar-collapse" class="navbar-collapse collapse">
          <ul class="nav navbar-nav">
            <li class="active nav-item"><a class="nav-link" href="{% url 'home' %}">Home</a></li>
            <li class="nav-item"><a class="nav-link" href="{% url 'how' %}">How it works</a></li>
            <li class="nav-item"><a class="nav-link" href="{% url 'faq' %}">FAQ</a></li>
            <li class="nav-item"><a class="nav-link" href="{% url 'about' %}">About us</a></li>
            {% if request.user.is_authenticated %}
              <li class="nav-item">
                <a class="nav-link" href="{% url 'users:detail' request.user.username %}">My Profile</a>
              </li>
              <li class="nav-item nav-item-cta last">
                <a class="btn btn-cta btn-cta-secondary" href="{% url 'account_logout' %}">Log out</a>
              </li>
            {% else %}
              <li class="nav-item"><a class="nav-link" href="{% url 'account_login' %}">Log In</a></li>
              <li class="nav-item nav-item-cta last"><a class="btn btn-cta btn-cta-secondary"
                                                        href="{% url 'users:postcode' %}">Sign Up</a></li>
            {% endif %}
          </ul><!--//nav-->
        </div><!--//navbar-collapse-->
      </nav><!--//main-nav-->
    </div><!--//container-->
  </header><!--//header-->

图标的css类

.navbar-toggler-icon {
            background: transparent url('../images/hamburger-icon.svg') no-repeat center center;
        }

Answer 1

你可以使用这样的东西。我已将按钮更改为链接。并且.navbar-toggler-icon类也进行了更改。

＆＃13;

.navbar-toggler-icon {
  background: url('https://image.flaticon.com/icons/svg/198/198416.svg')no-repeat center center;
  display: inline-block;
  height: 17px;
  width: 50px;
}

＆＃13;

<header id="header" class="header navbar-fixed-top">
  <div class="container">
    <h1 class="logo">
      <a href=""><span class="text">Cheaper</span></a>
    </h1>
    <!--//logo-->
    <nav class="" role="navigation">
      <a href="" class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-collapse">

        <span class="navbar-toggler-icon"></span>
      </a>
      <!--//nav-toggle-->

      <div id="navbar-collapse" class="navbar-collapse collapse">
        <ul class="nav navbar-nav">
          <li class="active nav-item"><a class="nav-link" href="{% url 'home' %}">Home</a></li>
          <li class="nav-item"><a class="nav-link" href="{% url 'how' %}">How it works</a></li>
          <li class="nav-item"><a class="nav-link" href="{% url 'faq' %}">FAQ</a></li>
          <li class="nav-item"><a class="nav-link" href="{% url 'about' %}">About us</a></li>
          {% if request.user.is_authenticated %}
          <li class="nav-item">
            <a class="nav-link" href="{% url 'users:detail' request.user.username %}">My Profile</a>
          </li>
          <li class="nav-item nav-item-cta last">
            <a class="btn btn-cta btn-cta-secondary" href="{% url 'account_logout' %}">Log out</a>
          </li>
          {% else %}
          <li class="nav-item"><a class="nav-link" href="{% url 'account_login' %}">Log In</a></li>
          <li class="nav-item nav-item-cta last"><a class="btn btn-cta btn-cta-secondary" href="{% url 'users:postcode' %}">Sign Up</a></li>
          {% endif %}
        </ul>
        <!--//nav-->
      </div>
      <!--//navbar-collapse-->
    </nav>
    <!--//main-nav-->
  </div>
  <!--//container-->
</header>
<!--//header-->

＆＃13;

导航栏移动图标没有出现

1 个答案: