仅在移动网站上切换

Question

我做了一个 header，当有人在桌面上访问该站点时，他会看到一个导航菜单。当同一个人在他的 phone 上访问该网站时，他首先会看到一个汉堡包菜单。当他点击汉堡菜单时，会出现一个动画和一个下拉菜单。

我能够修复此代码，但是当我在我的电脑上访问该网站并在我的 header 附近单击时，将出现此移动下拉菜单...

网站；

https://www.spiralex.nl/

我的汉堡和下拉代码；

function myFunction(x) {
  x.classList.toggle("change");
};

@media (min-width: 768px) {
  .bar1,
  .bar2,
  .bar3 {
    visibility: hidden;
  }
  .onderkant {
    visibility: hidden;
  }
}

.bar1,
.bar2,
.bar3 {
  width: 35px;
  height: 5px;
  top: -72px;
  position: relative;
  background-color: #e7e7e7;
  margin: 6px 0;
  transition: 0.4s;
  left: 15px;
}

.change .onderkant {
  background-image: linear-gradient(0deg, rgba(0, 0, 0, 0) 25%, rgba(76, 76, 76, 0.25) 100%);
  backdrop-filter: blur(10px);
  background-color: rgba(76, 76, 76, 0.4);
  height: 180px;
  top: -62px;
  padding-top: 10px;
  position: relative;
  transition: 0.2s;
  visibility: visible;
}

.onderkant {
  visibility: hidden;
}

<div id="Hamburger" onclick="myFunction(this)">
  <div class="bar1"></div>
  <div class="bar2"></div>
  <div class="bar3"></div>

  <div class="onderkant">
    <div id="texten">
      <a href="#elementor-action%3Aaction%3Dpopup%3Aopen%26settings%3DeyJpZCI6IjcxNTIiLCJ0b2dnbGUiOmZhbHNlfQ%3D%3D">
        <h1 id="marktmobile">MARKTEN</h1>
      </a>
      <a href="">
        <h1 id="prodmobile">PRODUCTEN</h1>
      </a>
      <a href="https://www.spiralex.nl/spirapedia/">
        <h1 id="spirmobile">SPIRAPEDIA</h1>
      </a>
      <a href="https://www.spiralex.nl/contact/">
        <h1 id="conmobile">CONTACT</h1>
      </a>
    </div>
  </div>
</div>

Answer 1

使用显示：none 而不是可见性：隐藏在媒体规范中

Answer 2

默认隐藏汉堡包部分并在小屏幕上显示：

#humburger{
    display:none;
}

@media all and (max-width: 768px) {
    #humburger{
        display:block;
    }
}

Answer 3

尝试

@media (min-width: 768px) {
    .onderkant{
        display: none;
    }
}

仅在移动网站上切换

Toggle only on mobile site

html

css

toggle

dropdown