在我的手机上，我可以点击它应该在的位置，然后会出现下拉菜单，但由于某种原因，汉堡本身是不可见的。当我在桌面上以移动视图查看该网站时，它是可见的，所以我很困惑。我到处寻找它可能被隐藏的地方，但我什么也没看到。任何帮助是极大的赞赏。网站链接如下：

https://chassis.site/

const navSlide = () => {
    const burger = document.querySelector('.burger');
    const nav = document.querySelector('.nav-links');
    const navLinks = document.querySelectorAll('.nav-links li');
    
    burger.addEventListener('click', () => {
        //toggle nav
        nav.classList.toggle('nav-active');
    
        //animate links
        navLinks.forEach((link, index) => {
            if(link.style.animation){
                link.style.animation = '';
            } else {
                link.style.animation = `navLinkFade 0.5s ease fowards ${index / 7 + 1}s`;
            }
        });
        //burger animation
        burger.classList.toggle('toggle');
    });


}

navSlide();

//sparkle
let index = 0,
    interval = 1000;

const rand = (min, max) => 
  Math.floor(Math.random() * (max - min + 1)) + min;

const animate = star => {
  star.style.setProperty("--star-left", `${rand(-10, 100)}%`);
  star.style.setProperty("--star-top", `${rand(-40, 80)}%`);

  star.style.animation = "none";
  star.offsetHeight;
  star.style.animation = "";
}

for(const star of document.getElementsByClassName("magic-star")) {
  setTimeout(() => {
    animate(star);
    
    setInterval(() => animate(star), 1000);
  }, index++ * (interval / 3))
}

@import url('css.css');
:root {  
  --purple: rgb(123, 31, 162);
  --violet: rgb(103, 58, 183);
  --pink: rgb(244, 143, 177);
  --white: rgb(190, 190, 190);
}
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
#app {
  background: #0a0a0a;
  height: 100vh;
  width: 100%;
  margin: 0;
  padding: 0;
  display:inline-flex ;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: linear-gradient(rgba(10, 10, 10, 0.5), rgba(0, 0, 0, 0.5)), repeating-linear-gradient(0, transparent, transparent 2px, black 3px, black 3px),
    url('../images/37P86Mcp.png');
  background-size: auto;
  background-position: center;
  z-index: 1;
}
/*--------------------------------------lines*/
hr.left {
  display: block;
  width: 30%;
  height: 1px;
  border: 0;
  border-top: 2px solid rgb(190, 190, 190);
  margin: 3em 0;
  padding: 0;
}
hr.right {
  display: block;
  width: 30%;
  height: 1px;
  border: 0;
  border-top: 2px solid rgb(190, 190, 190);
  margin: 3em 0;
  padding: 0;
}
/*--------------------------------------lines*/
/*--------------------------------------nav bar*/
nav{
  display: flex;
  position: fixed;
  width: 100%;
  justify-content: space-around;
  align-items: center;
  min-height: 8vh;
  font-family: 'Fugaz One', cursive;
}
.nav-links{
  display: flex;
  justify-content: space-around;
  width: 50%;
}
.nav-links li{
  list-style: none;
}
.nav-links a{
  color: rgb(190, 190, 190);
  text-decoration: none;
  letter-spacing: 2px;
  font-size: 20px;
}
.burger{
  display: none;
  cursor: pointer;
}
.burger div{
  width: 30px;
  height: 3px;
  background-color: rgb(190, 190, 190);
  margin: 5px;
  transition: all 0.3s ease;
}
@media screen and (max-width: 1230px){
  .nav-links{
    width: 70%;
  }
}
@media screen and (max-width: 854px){
  body{
    overflow-x: hidden;
  }
  .nav-links{
    position: absolute;
    right: 0px;
    height: 30vh;
    width: 15em;
    top: 8vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    transform: translateX(100%);
    transition: transform 0.4s ease-in;
  }
  .burger{
    display: block;
    padding: 0px 80px 0px 500px;
  }
  hr.left{
    height: 0px;
    width: 0%;
  }
  hr.right{
    height: 0px;
    width: 0%;
  }
}
.nav-active{
  transform: translateX(0%);
}

@keyframes navLinkFade{
  from{
    opacity: 0;
    transform: translateX(50px);
  }
  to{
    opacity: 1;
    transform: translateX(0px);
  }
}

.toggle .line1{
  transform: rotate(-45deg) translate(-5px, 6px);
}
.toggle .line2{
  opacity: 0;
}
.toggle .line3{
  transform: rotate(45deg) translate(-5px, -6px);
}
/*--------------------------------------nav bar*/
/*--------------------------------------sparkle*/
  @keyframes background-pan {
    from {
      background-position: 0% center;
    }
    
    to {
      background-position: -200% center;
    }
  }
  
  @keyframes scale {
    from, to {
      transform: scale(0);
    }
    
    50% {
      transform: scale(1);
    }
  }
  
  @keyframes rotate {
    from {
      transform: rotate(0deg);
    }
    
    to {
      transform: rotate(180deg);
    }
  }
  
  h1 {
    color: white;
    font-family: "Rubik", sans-serif;
    font-size: clamp(2em, 2vw, 4em);
    font-weight: 400;
    margin: 0px;
    padding: 20px;
    text-align: center;
  }
  
  h1 > .magic {
    display: inline-block;
    position: relative;
  }
  
  h1 > .magic > .magic-star {
    --size: clamp(20px, 1.5vw, 30px);
    
    animation: scale 700ms ease forwards;
    display: block;
    height: var(--size);
    left: var(--star-left);
    position: absolute;
    top: var(--star-top);
    width: var(--size);
  }
  
  h1 > .magic > .magic-star > svg {
    animation: rotate 1000ms linear infinite;
    display: block;
    opacity: 0.7;
  }
  
  h1 > .magic > .magic-star > svg > path {
    fill: var(--white);
  }
  
  h1 > .magic > .magic-text {
    animation: background-pan 3s linear infinite;
    background: linear-gradient(
      to right,
      var(--purple),
      var(--violet),
      var(--pink),
      var(--purple)
    );
    background-size: 200%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    white-space: nowrap;
    font-size: 64px;
  }
/*--------------------------------------sparkle*/

  
    
    
    
    
    
    
    
    
      
  
  
    
      
    
     
    

      

        

          
            
              
            
            
              
            
            
              
            
            chassis.site