Кнопка «Navbar» не раскрывается на мобильном телефоне (без JavaScript / JQuery)

Question

У меня есть навигационная панель, которая выглядит как это на компьютере. На мобильном устройстве параметры home и contact автоматически скрываются, и в верхнем правом углу появляется кнопка. Это три горизонтальные линии, по которым нужно щелкнуть, чтобы развернуть опции home и contact.
Однако, когда я нажимаю кнопку на мобильном телефоне, она не расширяет параметры. Он вообще ничего не делает (показывает только то, что на него нажали, обратив желтоватый прямоугольник вокруг него).

Мой код для навигационной панели:

<nav class="navbar fixed-top navbar-expand-lg navbar-dark" data-toggle="collapse" style="background-color: steelblue; text-color: white;">

  <div class="container">
    <a class="navbar-brand" style="text-align: left;" href="index.html">
      <div style="font-family: MyWebFont;;"><b>My website</b></div>
    </a>
    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse"
      data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="true"
      aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarResponsive">
      <ul class="navbar-nav ml-auto">
        <li class="nav-item">
          <a class="nav-link" href="index.html">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="contact.html">Contact</a>
        </li>
      </ul>
    </div>
  </div>
</nav>