仅在移动站点上切换

Question

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

我能够修复这个代码，但当我访问我的pc上的网站，我点击附近我的头，这个移动的dropdrown菜单将出现...

场地；

https://www.spiralex.nl/

我的汉堡包和下拉代码；

null

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>

null

Answer 1

使用Display：none代替Visibility：隐藏在介质规范中

Answer 2

试试看

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