Значок гамбургера загружается как "X"

Question

Я использую Bootstrap 4. Измените значок гамбургера на CSS Lines, добавив немного движения к каждой из 3 строк, чтобы получить «X». Тем не менее, при загрузке гамбургер представляет собой X вместо 3 стековых строк. В конце концов, после нажатия кнопки, он снова становится в правильном порядке. Пожалуйста, дайте мне знать, если так или иначе я могу исправить эту проблему загрузки.

.navbar {
  background: rgb(5,6,31);
  background: linear-gradient(360deg, rgba(5,6,31,1) 0%, rgba(1,49,85,1) 100%);
}

.navbar-nav > li {
  padding-left: 8px;
  padding-right: 8px;
}

.navbar-nav {
  padding-right: 20px;
}

.navbar-brand {
  padding-left: 1px;
}

.navbar-collapse {
  text-align: center;
}

.nav-link {
  color: white;
}

.nav-link:hover {
  color: #ffcf0a;
}

.navbar-toggler:focus, .navbar-toggler:active {
  outline: none;
  box-shadow: none;
}

.icon-bar {
	width: 22px;
	height: 2px;
	background-color: white;
	display: block;
	transition: all 0.2s;
	margin-top: 4px
}

.navbar-toggler::before {
  border: none;
  background: transparent !important;
}

.navbar-toggler .top-bar {
  transform: rotate(45deg);
  transform-origin: 10% 10%;
}

.navbar-toggler .middle-bar {
  opacity: 0;
}

.navbar-toggler .bottom-bar {
  transform: rotate(-45deg);
  transform-origin: 10% 90%;
}

.navbar-toggler.collapsed .top-bar {
  transform: rotate(0);
}

.navbar-toggler.collapsed .middle-bar {
  opacity: 1;
}

.navbar-toggler.collapsed .bottom-bar {
  transform: rotate(0);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<nav class="navbar navbar-expand-lg fixed-top">
      <div class="container-fluid">
        <a class="navbar-brand" href="https://www.youtube.com/user/FRAGRANCEFANATIC1" target="_blank">
          <img src="content\subscribe-nav.png" alt="Subscribe To My Channel">
        </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="icon-bar top-bar"></span>
        	<span class="icon-bar middle-bar"></span>
        	<span class="icon-bar bottom-bar"></span>
        </button>
        <!-- <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
          <i class="fas fa-bars"></i>
        </button> -->
        <div class="collapse navbar-collapse" id="navbarNav">
          <ul class="navbar-nav ml-auto">
            <li class="nav-item active">
              <a class="nav-link" href="#section-top">Home <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#section-about">About</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#section-video">Videos</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#section-blog">Blog</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#section-merch">Merchandise</a>
            </li>
          </ul>
        </div>
      </div>
    </nav>

Answer 1

Это происходит потому, что класс collapsed необходим на кнопке navbar-toggler, чтобы строки стали гамбургером.

Чтобы иконка изначально отображалась как гамбургер, добавление collapsed должно сделать эту работу.

Пример JSFiddle