修改颜色后，Bootstrap 汉堡不再出现答案

【问题标题】：Bootstrap hamburger no longer appears after modifying colors修改颜色后，Bootstrap 汉堡不再出现
【发布时间】：2019-11-20 04:06:00
【问题描述】：

我对 html、css、js 和 bootstrap 4 还很陌生。我正在尝试建立一个网站来练习我的技能。我终于设法更改了我的 bootstrap 4 导航栏的颜色、文本、字体大小等，但是当我缩小时，汉堡符号消失了，我失去了选择。

我删除的唯一代码是用于更改颜色的 bg-light，以及在我的上创建自定义类以更改文本颜色

我的代码链接：https://codepen.io/jehc10/pen/LKqRRQ

             .navbar-nav {
              background:#4287f5;
              }

              .navbar-brand {
               background:#4287f5;
                     }

                .navbar-brand.custom{
                  color:#FFFFFF;
                   font-size:25px
                  /* border-right:2px solid black; */

                        }

                         .navbar {
                          background:#4287f5;
                               }

                           body {
                           font-family: 'Poppins', sans-serif;
                           /* font-weight:700; */
                            }

                          .navbar-nav li a {
                           color: #FFFFFF;
                           font-size:20px;
                              }

【问题讨论】：

有一个汉堡包，和蓝色菜单的背景一样；）点击右侧，菜单会滑开。添加诸如此代码之类的代码，您将看到它存在于那里 - .navbar-toggler { background: red; }
寻求代码帮助的问题必须包括在问题本身中重现它所需的最短代码，最好在Stack Snippet 中。请参阅如何创建Minimal, Reproducible Example。
汉堡包是一张以.navbar-dark为主题的图片。也许你已经删除了那个类，所以图像没有显示。

标签： html css bootstrap-4

【解决方案1】：

不要使用图像汉堡包，而是使用 HTML 和 CSS 创建汉堡包。

.navbar, .navbar-nav {
  background: #4287f5;
}
.navbar-brand.custom {
  color: #FFFFFF;
  font-size: 25px
}
.navbar-toggler {
  padding: .25rem .5rem;
  font-size: 1.25rem;
  line-height: 1;
  background-color: transparent;
  border: 1px solid transparent;
  border-radius: .25rem;
}
.navbar-togglebar {
  background: #FFFFFF;
  display: block;
  width: 25px;
  height: 2px;
  vertical-align: middle;
  margin: 5px;
}
.navbar-nav li a {
  color: #FFFFFF;
  font-size: 20px;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<nav class="navbar navbar-expand-lg">
  <a class="navbar-brand custom" href="#">Jesse</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-togglebar"></span>
    <span class="navbar-togglebar"></span>
    <span class="navbar-togglebar"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="#">About me <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Portfolio</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Pricing</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Contact me</a>
      </li>
    </ul>
  </div>
</nav>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

【讨论】：

【解决方案2】：

您可以为导航汉堡图标添加以下样式：

/*Initial burger state*/
button.navbar-toggler.navbar-dark.collapsed {
    background: #000;
}

/*When toggled*/
.navbar-toggler:not(:disabled):not(.disabled) {
    cursor: pointer;
    background: #000;
}

【讨论】：