Как вы получаете значок переключателя, чтобы оставаться невидимым до коллапса веб-страницы и затем появляться после коллапса?

Question

Я хочу, чтобы панель навигации отображалась только с указанными элементами, а значок переключателя (значок гамбургера) был невидимым «до свертывания» веб-страницы. Затем я хочу, чтобы перечисленные элементы стали невидимыми, а значок переключателя стал видимым «после свертывания» веб-страницы. Я также хочу, чтобы нажатый значок переключателя приводил к появлению невидимых элементов в раскрывающемся меню.

Это код, который у меня есть. Я использую Bootstrap версии 4.3

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container">

    <button type="button" class="navbar-toggler-icon collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
		<span class="sr-only">Toggle navigation</span>
		<span class="icon-bar"></span>
		<span class="icon-bar"></span>
		<span class="icon-bar"></span>
	</button>

    <a href="#" class="navbar-brand">Koffee</a>

    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="navbar-nav">
        <li><a href="#" class="nav-link">About<span class="sr-only">(current)</span></a></li>
        <li><a href="#" class="nav-link">Contact</a></li>
      </ul>

      <ul class="nav navbar-nav ml-auto">
        <li><a href="#" class="nav-link">Sign Up</a></li>
        <li><a href="#" class="nav-link">Login</a></li>
      </ul>
    </div>
  </div>
</nav>