使用Javascript隐藏固定CSS菜单

这是我第一次建立一个网站，我发现自己被一些可能只是对一些基本html标记原则的误解所困扰，所以请放轻松

我在屏幕顶部有一个固定的CSS菜单，如下所示：

<div class="banner-contain" id="myTopNav">
    <div class="cssmenu w3-container">
        <div class="w3-col s4 w3-left"><span class="w3-opennav w3-hide-large w3-xxlarge w3-hover-text-grey" onclick="w3_open()"><i class="fa fa-bars"> .  </i></span></div>
    </div>
</div>

我可以使用以下JS成功隐藏它：

function w3_open() {
    document.getElementById("mySidenav").style.display = "block";
    document.getElementById("myOverlay").style.display = "block";
    document.getElementById("myTopNav").style.display = "none";
    document.getElementById("hide-pad").style.display = "none";
}

function w3_close() {
    document.getElementById("mySidenav").style.display = "none";
    document.getElementById("myOverlay").style.display = "none";
    document.getElementById("myTopNav").style.display = "block";
    document.getElementById("hide-pad").style.display = "block";
}

Hide pad只需切换删除我用来将页面内容保持在菜单下方的填充

现在是实际问题,；我想修改CSS菜单，使其看起来更像这样，但该功能不再按预期工作（即不隐藏ID myTopNav的完整内容）：

帮助
s4

---

提前感谢您的建议，以及之前作为潜伏者接受的所有建议-sgn

从当前div中删除onClick函数并将其交给父div

所以你的代码现在看起来像这样

<div class="banner-contain" id="myTopNav" onclick="w3_open()">    
    <div class="cssmenu w3-container">
       <div class="w3-row">
          <div class="w3-col s4 w3-left"><span class="w3-opennav w3-hide-large w3-xxlarge w3-hover-text-grey"><i class="fa fa-bars"></i></span></div>
          <div class="w3-col s4 w3-center"><h3 class="w3-wide logo"><b>HELP</b></h3></div>
          <div class="w3-col s4 w3-center"><p>s4</p></div>
        </div>
    </div>
</div>

帮助
s4

---

希望它能起作用

感谢大家的回复，结果是我犯了一个新手错误，对css视口（？）设置感到困惑，我需要

@media（min-width:993px）横幅包含{display:none！important}

以便隐藏横幅，然后可以切换到顶部或左侧查看-这解决了我的问题，但我真的没有问正确的问题，对此表示抱歉。

您必须将父div或子div的Id从“myTopNav”更改，因为具有相同Id的两个元素在此处创建问题。您已经使用了相同Id两次。ID必须是唯一的。我刚刚做了一次编辑，将ID从

“

中删除，这反映了我最初打算提交的代码，但该代码不起作用。我还尝试了另一种可能性，按照您的建议（myTopNav myTopNav2），创建两个不同名称的独立ID，但也没有成功。

<div class="banner-contain" id="myTopNav">    
    <div class="cssmenu w3-container">
        <div class="w3-row">
          <div class="w3-col s4 w3-left"><span class="w3-opennav w3-hide-large w3-xxlarge w3-hover-text-grey" onclick="w3_open()"><i class="fa fa-bars"></i></span></div>
          <div class="w3-col s4 w3-center"><h3 class="w3-wide logo"><b>HELP</b></h3></div>
          <div class="w3-col s4 w3-center"><p>s4</p></div>
        </div>
    </div>
</div>

<div class="banner-contain" id="myTopNav" onclick="w3_open()">    
    <div class="cssmenu w3-container">
       <div class="w3-row">
          <div class="w3-col s4 w3-left"><span class="w3-opennav w3-hide-large w3-xxlarge w3-hover-text-grey"><i class="fa fa-bars"></i></span></div>
          <div class="w3-col s4 w3-center"><h3 class="w3-wide logo"><b>HELP</b></h3></div>
          <div class="w3-col s4 w3-center"><p>s4</p></div>
        </div>
    </div>
</div>