有人可以帮我解决导航栏上的切换按钮吗？

Question

所以当我的导航栏在平板电脑和移动设备上时需要帮助。当您单击下拉按钮时，我需要它占据整个页面。基本上，当我点击手机或平板电脑的下拉按钮时，它必须占据整个高度。我想我需要为此使用 JavaScript，但我不知道具体怎么做，如果有人可以帮助我，请非常感谢，谢谢！

这是我的导航栏，我使用 bootstrap 4 和一些 css 来编辑它，但我只需要像上面解释的那样以某种方式为平板电脑和移动设备制作它。

 <nav class="navbar navbar-expand-lg navbar-light bg-yellow px-5 py-3 font-weight-bold" id="navbar">
        <div class="logo d-flex flex-column">
          <a href="index.html" class="mx-auto"><img src="./Design/Logo.png"  width="40" height="40" class="logo-img"></a>
        <a class="navbar-brand mx-auto font-weight-bold" href="#">Logo</a>
        </div>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
          <ul class="navbar-nav w-90 justify-content-around ml-lg-auto">
            <li class="nav-item">
              <a class="nav-link" href="#">Academy</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Academy</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Academy</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Academy</a>
            </li>
            <li class="nav-item justify-self-end">
                <a href="./contact.html" class="btn btn-danger">Button</a>
            </li>
          </ul>
        </div>
    </nav>

这就是在平板电脑或手机上单击下拉按钮时的样子，基本上它必须占据整个空间。