Question

。

在响应版本中滚动时，我需要将摇杆的颜色更改为白色，但是现在滚动时颜色为黑色。如何将颜色更改为白色？这是html：

<div class="menu_area">
                        <nav class="navbar navbar-expand-lg navbar-light">
                            <!-- Logo -->
                            <a class="navbar-brand" href="#">
                                <img src="img/svg/black.svg" class="lia-logo" style="margin-top: -15px;width: 48px; height: 38px;">
                            </a>


                           <button class="navbar-toggler"  type="button" data-toggle="collapse" data-target="#ca-navbar" aria-controls="ca-navbar" aria-expanded="false" aria-label="Toggle navigation"><span class="zina"></span></button>


                            <!-- Menu Area -->
                            <div class="collapse navbar-collapse" id="ca-navbar">
                                <ul class="navbar-nav ml-auto" id="nav" style="margin-right: -220px;">
                                    <li class="nav-item active"><a class="nav-link" href="#home" style="color: #000;">Home</a></li>
                                    <li class="nav-item"><a class="nav-link" href="#about" style="color: #000;">About</a></li>
                                    <li class="nav-item"><a class="nav-link" href="#features" style="color: #000;">Why Lia</a></li>
                                    <li class="nav-item"><a class="nav-link" href="#application" style="color: #000;">Application</a></li>
                                    <li class="nav-item"><a class="nav-link" href="#support" style="color: #000;">Support</a></li>
<!--                                <li class="nav-item"><a class="nav-link" href="#team">Team</a></li>-->
                                    <li class="nav-item"><a class="nav-link" href="#contact" style="color: #000;">Contact</a></li>
                                </ul>
<!--
<!--
                                <div class="sing-up-button d-lg-none">
                                    <a href="#">Sign Up Free</a>
                                </div>-->
                            </div>
                        </nav>
                    </div>

这是CSS：

.menu_area .navbar-brand {
    font-size: 72px;
    font-weight: 700;
    color: #fff;
    margin: 0;
    line-height: 1;
    padding: 0;
}


.menu_area .navbar-brand:hover,
.menu_area .navbar-brand:focus {
    color: #fff;
}

@media (min-width: 768px) and (max-width: 991px) {
 #ca-navbar {
        padding: 30px;
        color: red;
        border-radius: 3px;
        background: linear-gradient(to right, #007ADF, #00ECBC);      
        text-align: left;
    }
}
@media (min-width: 320px) and (max-width: 767px) {
#ca-navbar {
        padding: 20px;
        border-radius: 3px;
/*      background-color: #CFD1D2;*/
        background: linear-gradient(to right, #007ADF, #00ECBC);      
        text-align: left;
    }
}

并且我通过代码元素获得了此代码：

background-image: url(data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://ww…p='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E);

我写了这个：

 $window.on('scroll', function () {
        if ($window.scrollTop() > 48) {
            $('.navbar-toggler').attr('src',"data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' 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 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
        } else {
           $('.navbar-toggler').attr('src',"data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255, 255, 255, 0)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
        }
    });

但是它不起作用，这是什么问题？

也许我在js代码中有一些错误？我怎样才能做到这一点？也许我的js代码有一些错误？

Answer 1

您只需更改一些CSS值即可更改twitter bootstrap导航栏汉堡包图标，它实际上是包含RGB颜色值的SVG图像，因此更改非常容易

这是一个小提琴，向您展示如何操作，我以一个闪亮的绿色汉堡为例：https://jsfiddle.net/ds3o8zek/1/

因此，如果要更改导航栏汉堡包的颜色，只需将以下几行放入自己的样式表中，然后将颜色设置为所需的任何颜色即可。

.fancy-toggler.navbar-toggler .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(75, 255, 0, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}

.fancy-toggler.navbar-toggler {
  border-color: rgb(75, 255, 0);
}

.fancy-toggler.navbar-toggler:focus {
  outline-color: rgb(75, 255, 0);
}

此处的样式表分为三部分，代表汉堡包的SVG图标，在属性background-image中的SVG代码内部，有一个stroke ='rgba（75，255，0，1）'部分，这部分设置SVG的颜色，前三个值是RGB颜色值，第四个值是不透明度。第二个css规则更改三条线周围零件的边框颜色。最后，我还为轮廓修改了颜色。

作为html代码，我从bootsrap文档中获取了示例，请注意，我添加了一个名为“ fancy-toggler”的新类，您可以在上面的样式表中找到它：

<nav class="navbar navbar-expand-xl navbar-dark bg-dark">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="fancy-toggler 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>
  </button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>

Answer 2

您可以从Flaticon中选择任何汉堡包图标并下载。下载后，将图像转换为图像base64的格式，并使用新的背景url覆盖此类->“。navbar-dark .navbar-toggler-icon”的CSS背景属性。

如何在bootstrap4中更改汉堡的颜色

2 个答案: