Html 引导导航栏折叠图标不显示也不工作

我正试图在我的一个小项目上实现一个可折叠的导航栏。我的问题是，当我调整窗口大小时，导航栏会折叠，但按钮（即使可以单击）不会出现，也不会为我提供任何选项

我不知道这是否是jQuery/JS问题。我只是一个初学者，所以我只是在代码笔设置上链接了一些库。我看了一下人们在这方面遇到的一些问题，但没有一个解决方案对我有帮助

代码笔链接是：

在此主题上的任何帮助（以及各种提示）都将不胜感激

多谢各位

HTML:

导航栏切换器类应为导航栏颜色方案类型类。试试这支钢笔

<nav class='navbar navbar-inverse navbar-toggleable-sm mx-auto sticky-top'>
    <button class="navbar-toggler collapsed mx-auto" type="button" data-toggle="collapse" data-target="#navbarNav" aria-expanded="false" aria-controls="navbarNav" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
  </button>
      <div class="collapse navbar-collapse" id="navbarNav">
    <ul class='navbar-nav mx-auto'>
      <li class='nav-item'><a href='#sobreMim' class='nav-link'><strong>Diego Mengue</strong></a></li>
      <li class='nav-item'><a href='#portfolio' class='nav-link'>Portfólio</a></li>
      <li class='nav-item'><a href='#contato' class='nav-link'>Contato</a></li>
    </ul>
    </div>
  </nav>

如果不希望遵循可用的颜色方案，请在自定义样式中为navbar toggler类添加样式

<nav class='navbar navbar-inverse navbar-toggleable-sm mx-auto sticky-top'>
    <button class="navbar-toggler collapsed mx-auto" type="button" data-toggle="collapse" data-target="#navbarNav" aria-expanded="false" aria-controls="navbarNav" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
  </button>
      <div class="collapse navbar-collapse" id="navbarNav">
    <ul class='navbar-nav mx-auto'>
      <li class='nav-item'><a href='#sobreMim' class='nav-link'><strong>Diego Mengue</strong></a></li>
      <li class='nav-item'><a href='#portfolio' class='nav-link'>Portfólio</a></li>
      <li class='nav-item'><a href='#contato' class='nav-link'>Contato</a></li>
    </ul>
    </div>
  </nav>