折叠和展开导航栏

Question

我的导航有问题：(1) 当我在移动视图上展开它（通过单击图标）然后将屏幕调整到桌面时，导航不会自动为桌面设置适当的格式设置，直到浏览器被刷新。并且 (2) 导航在折叠时显示通过其下方的元素（图片除外）。我必须在

标签上设置背景颜色以掩盖通过它显示的导航。我对标签做了同样的事情，但没有用。

请有人指出我哪里出错了。

谢谢。

抱歉我的英语不好。 HTML

  <nav>
        <div class="logoDiv">
          <img src="pictures/logo.png" alt="Logo" class="logo"/>
        </div>

        <span id="burger"> <i class="fa fa-bars"></i></span>

        <div id="navLinksDiv" class="hideNav">

        <div id="navigationLinks">
            <a href="index.php" class="navLinks">Home</a>
            <a href="category.php" class="navLinks">Category</a>
            <a href="praise.php" class="navLinks">Praises</a>
            <a href="albums.php" class="navLinks">Albums</a>
            <a href="about.php" class="navLinks">About Us</a>
        </div>

        <form action="self" id="search-form">
              <input type="text" name="search" placeholder="Search..."/><button type="submit" name="button" class="btn">GO</button>
        </form>

      </div>

      </nav>

The CSS

.hideNav{
    height: 0;
    transition: height .3s;
    -moz-transition: height .3s;
    -o-transition: height .3s;
    -webkit-transition: height .3s;
}

.showNav{
    height: 300px;
    transition: height .3s;
    -moz-transition: height .3s;
    -o-transition: height .3s;
    -webkit-transition: height .3s;
}

The JS

  <script>

    let naLinks = document.getElementById("navLinksDiv");

    function hideDisplay(burg, element, hide, show) {
      let burger = document.getElementById(burg);
      let navigationDiv = document.getElementById(element);

        burger.addEventListener('click', () => {
          if (!navigationDiv.classList.contains(hide)){
            navigationDiv.classList.add(hide);
            navigationDiv.classList.remove(show)

          }else{
            navigationDiv.classList.remove(hide);
            navigationDiv.classList.add(show);
          }
        });

    }

    hideDisplay('burger', 'navLinksDiv', 'hideNav', 'showNav');
<script>