如何在引导程序 4 中更改汉堡包的颜色答案

【问题标题】：how to change color of hamburger in bootstrap4如何在引导程序 4 中更改汉堡包的颜色
【发布时间】：2019-03-22 01:59:12
【问题描述】：

。

我需要在响应版本中滚动时将棒的颜色更改为白色，但现在滚动时颜色为黑色。如何将颜色变为白色？这是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代码有错误？

【问题讨论】：

你试过$('.navbar-toggler').css('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)'了吗？
@s89_ 它对我没有帮助
@RamondeVries 你的意思是我需要在 if 语句中过去？它没有帮助我
@Zim，完成）你可以看到它
@Zim，不，我只需要将meny从黑色改为白色

标签： html css bootstrap-4 responsive

【解决方案1】：

你可以通过改变一些 CSS 值来改变 twitter bootstrap navbar 汉堡图标，它实际上是一个包含 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>

【讨论】：

【解决方案2】：

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

【讨论】：