html - 修改颜色后不再出现 Bootstrap 汉堡包

Question

我对 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;
                              }

Answer 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>