导航栏在手机视图中没有响应

Question

我的导航栏没有响应。我希望它变成一个 3 栏菜单，当您通过手机查看网站时，您可以点击该菜单，但它似乎不起作用。这是我正在谈论的内容的 gif。

如您所见，调整大小时顶部的导航栏完全消失。如果有人能解释我哪里出了问题，我将非常感激。

这是代码

const mainMenu = document.querySelector('.mainMenu');
const closeMenu = document.querySelector('.closeMenu');
const openMenu = document.querySelector('.openMenu');




openMenu.addEventListener('click',show);
closeMenu.addEventListener('click',close);

function show(){
    mainMenu.style.display = 'flex';
    mainMenu.style.top = '0';
}
function close(){
    mainMenu.style.top = '-100%';
}

nav {
    color: white;
    display: flex;
    justify-content: space-between;

}

nav .mainMenu {
    display: flex;
    list-style: none;
        font-family: "SR";
}

nav .mainMenu li a {
    display: inline-block;
    padding: 15px;
    text-decoration: none;
    text-transform: uppercase;
    color: white;
    font-size:  1.5vw;
}

nav ul li a:hover {
    color: white;
    z-index: 10000;
      font-family: "SR";
}

nav ul ul {
    position: absolute;
    top: 40px;
    display: none;
    z-index: 10000;
left: 0%;
}

nav ul li:hover > ul {
    display: block;
    z-index: 10000;
    animation: none;
}



nav ul ul li {
    width: 100%;
    float: none;
    display: list-item;
    position: relative;
    z-index: 10000;
      white-space: nowrap;
}

nav ul ul ul li {
    position: relative;
    margin-top: -60px;
    left: 100%;
    z-index: 10000;
    white-space: nowrap;
}

a.active {
    opacity: 1;
}

 ul li a:nth-of-type(1) {
     
     opacity: 0.5;
   

}

 ul li a.active:nth-of-type(1) {
   color: #fff;
   opacity: 1;

   cursor: url(Cursors/3.png), auto;

}
 ul li a:hover:nth-of-type(1) {
    color: #fff;
    opacity: 1;
 
    position: sticky;
    border: none;
    box-shadow: none;
    transition-delay: 0s;

 
    cursor: url(Cursors/3.png), auto;
}

 a:nth-of-type(2) {
z-index: 10000;

}


nav ul li {
    background: transparent;
    position: relative;
    list-style: none;
    display: inline-block;
    z-index: 10000;
  font-family: "SU";

}

nav .openMenu {
    font-size: 1.9vw;
    margin: 20px;
    display: none;
    cursor: pointer;
}

nav .mainMenu .closeMenu, .icons i {
    font-size: 1.9vw;
    display: none;
    cursor: pointer;
}

nav .logo {

    font-size: 1.7vw;
    cursor: pointer;
      letter-spacing: 0.2rem;
      margin-left: 2%;
      margin-top: 0.8%;
      padding-top: 10px;
}

.mainMenu {

    margin-top: 1%;
}
@media only screen and (max-width: 414px)  {


    nav .mainMenu {
        height: 100vh;
        position: fixed;
        top: 0;
        right: 0;
        left: 0;
        z-index: 10000;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        background: black;
        transition: top 1s ease;
        display: none;
    
    }


   

    nav .mainMenu .closeMenu {
        display: block;
        position: absolute;
        top: 20px;
        right: 20px;
    }



    nav .openMenu {
        display: block;
    }

    i {
        display: inline-block;
        padding: 12px;
        
        margin-top: -40%;
        left: ;
    }



.closeMenu {
    position: absolute;
    margin-top: -538px;
    left: 131px;
}

 nav .logo {
    margin: 6px;
    font-size: 3.8vw;
    cursor: pointer;
      letter-spacing: 0.2rem;
      margin-left: 4%;
      margin-top: 0.5%;

}

nav a {
    font-size: 3vw;
}


nav .mainMenu li a {
    display: inline-block;
    padding: 15px;
    text-decoration: none;
    text-transform: uppercase;
    color: white;
    font-size:  5vw;
}

nav ul ul ul li {
    position: relative;
    margin-top: -60px;
    left: 150%;
    z-index: 10000;

   }
   nav ul ul li {
    width: 100%;
    float: none;
    display: list-item;
    position: relative;
    z-index: 10000;
    white-space: normal;
    margin-left: 90%;
    margin-top: -30%;
  
}
.masonry .mItem {
  display: inline-block;
  margin-bottom: 4px;
  width: 98%;
  z-index: -1;
}

img {
    z-index: 10000;
}
}

<nav>
        <div class="logo"><h2>GALLERY</h2></div>
        <div class="openMenu"><i class="fa fa-bars fa-3x" ></i></div>
        <ul class="mainMenu">
        <li><a href="#" class="active">Gallery</a></li>
                <li><a href="https://ayanfesanusi.com/">Home</a></li>
                <li><a href="https://ayanfesanusi.com/About/index.html">About</a></li>
                <li class="hasDD"><a href="https://ayanfesanusi.com/About/Projects/index.html">Projects</a></li>
                <li><a href="https://ayanfesanusi.com/About/Contact/index.html">  Contact</a><li>
                <div class="closeMenu"><i class="fa fa-times fa-4x"></i></div>
        </ul>           
    </nav>

Answer 1

您在 CSS 中使用以下媒体查询，以在可用宽度低于 414px 时删除导航栏。查看

display: none

风格

@media only screen and (max-width: 414px)  {
  nav .mainMenu {
      height: 100vh;
      position: fixed;
      top: 0;
      right: 0;
      left: 0;
      z-index: 10000;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      background: black;
      transition: top 1s ease;
      display: none;
  
  }
  
 }