Bootstrap Анимация Navbar Collapse плавная, НО анимация открытия не плавная

Question

my Bootstrap Navbar сворачивается в значок "гамбургер", когда окно просмотра небольшое. Когда я нажимаю кнопку, чтобы открыть свои навигационные элементы, анимация скольжения отсутствует, скорее, навигационные элементы открываются внезапно. Однако, когда я нажимаю кнопку, чтобы закрыть элементы nav, происходит плавная анимация перемещения элементов nav и их скрытия.

Я попытался обернуть элементы nav в div-обертку, как другие вопросы / ответы уже обсуждались, но это пока не помогло.

Я ищу анимацию скольжения вниз, как показано в примерах документации Bootstrap (https://getbootstrap.com/docs/4.0/components/navbar/#responsive -поведения ).

Вот мой HTML:

  <!-- Bootstrap Navbar -->
  <nav class="navbar navbar-light bg-light navbar-expand-sm sticky-top" id="navbar">
    <a class="navbar-brand" href="#welcome-section">T P E N G</a>
  <!-- Collapse Button -->
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar" aria-controls="collapsibleNavbar" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <!-- Collapse Button -->
    <div class="collapse navbar-collapse navbar-nav d-flex justify-content-end align-items-start" id="collapsibleNavbar">
      <div class="navbar-nav collapse navbar-collapse justify-content-end" id="collapsibleNavbar">
        <a class="nav-item nav-link" href="#welcome-section">About</a>
        <a class="nav-item nav-link" href="#projects">Projects</a>
        <a class="nav-item nav-link" href="#external-links">Contact</a>
      </div>
    </div>
  </nav>
  <!-- Bootstrap Navbar -->

, а вот CSS:

body {
  font-family: 'Barlow Condensed', sans-serif;
  cursor: default;
}

/* START Bootstrap Navbar + media query */

.nav-link {
  margin-left: 40px;
}

nav a {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 2em;
}

.navbar-brand {
  font-size: 2em;
}

@media only screen and (max-width: 576px) {
  .navbar-nav {
    display: flex;
    margin: 0 auto;
  }

  .nav-item {
    margin: 0 auto;
  }

  .navbar-brand {
    display: flex;
  }
}

Любая помощь будет принята с благодарностью. Спасибо!