twitter-bootstrap 更改导航栏中引导程序图标栏的颜色

Change the color of bootstrap icon bar in navbar

提问by swapnil saraf

I cannot change the color of toggle icon bar. I want to change the color to white.

我无法更改切换图标栏的颜色。我想将颜色更改为白色。

<nav class="navbar navbar-toggleable-md navbar-light">
    <button class="navbar-toggler navbar-toggler-right" type="button"  style = "border: 2px solid #E0E0E0;" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon icon-bar" style = "color: white;"></span>
    </button>
    <a class="navbar-brand" href="#">SWAPNIL SARAF</a>
    <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav ml-auto">
            <li class="nav-item active">
            <a class="nav-link" href="#">WORK <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item">
            <a class="nav-link" href="#">INSPIRATIONS</a>
            </li>
            <li class="nav-item">
            <a class="nav-link" href="#">ABOUT</a>
            </li>
            <li class="nav-item">
            <a class="nav-link" href="#">CONTACT</a>
            </li>
        </ul>
    </div>
</nav>

style.css

样式文件

below is my css file:

下面是我的 css 文件：

.navbar .navbar-toggler .icon-bar{
   background-color: white !important;
}

采纳答案by Sahil Dhir

I checked your code structure and the reason why your css code is not working because the .navbar-toggleclass was removed from button code as below:

我检查了您的代码结构以及您的 css 代码不起作用的原因，因为 .navbar-toggle类已从按钮代码中删除，如下所示：

 <button class=" navbar-toggler  navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">

So add class navbar-togglein here as the bootstrap css is written on the basis of this class.

所以在这里添加类navbar-toggle因为bootstrap css 是在这个类的基础上编写的。

   <button class=" navbar-toggle navbar-toggler  navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">

Also check the example I have tried using your html code:

还要检查我使用您的 html 代码尝试过的示例：

.navbar .navbar-toggler .icon-bar {
  background: black !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">




<nav class="navbar navbar-toggleable-md navbar-light">
  <button class="navbar-toggle navbar-toggler  navbar-toggler-right" type="button" style="border: 2px solid #E0E0E0;" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon icon-bar" ></span>
            </button>
  <a class="navbar-brand" href="#">SWAPNIL SARAF</a>
  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav ml-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">WORK <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">INSPIRATIONS</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">ABOUT</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">CONTACT</a>
      </li>
    </ul>
  </div>
</nav>

回答by Arun venkitachalam

I have noticed out two issue here

我注意到这里有两个问题

1. In style.css

1. 在 style.css 中

Replace !importtant with !important

用 !important 替换 !important

1. use css classs like this way

   .navbar-toggler-icon.icon-bar{ background-color: white !important; }

2. 像这样使用 css 类

   .navbar-toggler-icon.icon-bar{ background-color: white !important; }

Thanks, Arun

谢谢，阿伦

回答by mikeym

First, you need to find out exactly what the specific CSS selector path is for the icon-barin your particular version of Bootstrap. I find the most reliable way to do this is to use Developer Tools console. For example, in Chrome, right click on the icon and select inspect.

首先，您需要确切地找出icon-bar特定版本的 Bootstrap 中的特定 CSS 选择器路径。我发现最可靠的方法是使用开发者工具控制台。例如，在 Chrome 中，右键单击图标并选择inspect。

This will bring you to roughly where the icon-barspans are in the html and you should see something like .navbar-default .navbar-toggle .icon-barwith a single background-colorrule on it like in the screenshot below.

这将使您大致了解icon-bar跨度在 html 中的位置，您应该会看到类似下面的屏幕截图中.navbar-default .navbar-toggle .icon-bar带有单个background-color规则的内容。

COOL TIP:You can click on the small color box of the background-colorrule to change the icon-barcolor directly on the page.

COOL TIP：您可以直接在页面上点击background-color规则的小颜色框来更改icon-bar颜色。

From there it should be a case of simply copying the CSS straight from Dev Tools window, pasting it into your custom CSS file and adjusting the color to taste.

从那里开始，只需直接从 Dev Tools 窗口复制 CSS，将其粘贴到您的自定义 CSS 文件中，然后调整颜色即可。

Hope that helps!

希望有帮助！

回答by Rajesh Karunakaran

Try this

试试这个

.navbar-default .navbar-toggle .icon-bar {
        background-color: #ffffff !important;
    }

回答by Prasath V

Change this into your code.

将其更改为您的代码。

HTML

HTML

<span class="navbar-toggler-icon icon-bar"></span>

CSS

CSS

.navbar .navbar-toggler .icon-bar {
    color: #fff !important;
}

回答by Ganesh Putta

i have changed the color to red. Try this, u can change the color that you want

我已将颜色更改为红色。试试这个，你可以改变你想要的颜色

  .navbar-inverse .navbar-toggle .icon-bar {
    background-color: red !important;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Case</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

</head>
<body>

<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>                        
      </button>
      <a class="navbar-brand" href="#">WebSiteName</a>
    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li class="dropdown">
          <a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1 <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Page 1-1</a></li>
            <li><a href="#">Page 1-2</a></li>
            <li><a href="#">Page 1-3</a></li>
          </ul>
        </li>
        <li><a href="#">Page 2</a></li>
        <li><a href="#">Page 3</a></li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
        <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
      </ul>
    </div>
  </div>
</nav>
  
<div class="container">
  <h3>Collapsible Navbar</h3>
  <p>In this example, the navigation bar is hidden on small screens and replaced by a button in the top right corner (try to re-size this window).
  <p>Only when the button is clicked, the navigation bar will be displayed.</p>
</div>

</body>
</html>