Bootstrap гамбургер больше не появляется после изменения цвета

Question

Я довольно новичок в html, css, js и bootstrap 4. Я пытаюсь создать веб-сайт только для того, чтобы практиковать свои навыки. Мне, наконец, удалось изменить цвета, текст, размер шрифта и т. Д. Моей панели начальной загрузки 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

Вы можете добавить следующий стиль к значку бургера навигации:

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

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

Answer 2

Вместо использования изображения гамбургера, создайте гамбургер, используя 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>