为什么我的汉堡菜单没有显示在手机上？

Question

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

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*/

<!DOCTYPE html>
<html onclick="play()" lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatibale" content="ie-edge">
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    <link rel="stylesheet" type="text/css" href="css/css.css">
    <link href="https://fonts.googleapis.com/css2?family=Fugaz+One&display=swap" rel="stylesheet">
    <audio src="media/music.mp3"></audio>
    <title>chassis.site</title>
      <style type="text/css">
        img {
            display: block;
            margin-left: auto;
            margin-right: auto;
        }
      </style>
  </head>
  <body>
    <!-- nav-->
      <nav>
        <hr class="left"/>
        <ul class="nav-links">
          <li><a href="https://chassis.site/">Home</a></li>
          <li><a href="/subdomains/services.html">Services</a></li>
          <li><a href="https://e.rip/chassis/" target="_blank">Bio Page</a></li>
          <li><a href="/subdomains/projects.html/">Projects</a></li>
        </ul>
        <hr class="right"/>
        <div class="burger">
          <div class="line1"></div>
          <div class="line2"></div>
          <div class="line3"></div>
        </div>
      </nav>
    <!-- nav-->
     <audio id="audio" loop>
        <source src="media/music.mp3" type="audio/mp3">
     </audio>
    <div id="app">
      <div class="text">
        <h1>
          <span class="magic">
            <span class="magic-star">
              <svg viewBox="0 0 512 512">
              <path d="M512 255.1c0 11.34-7.406 20.86-18.44 23.64l-171.3 42.78l-42.78 171.1C276.7 504.6 267.2 512 255.9 512s-20.84-7.406-23.62-18.44l-42.66-171.2L18.47 279.6C7.406 276.8 0 267.3 0 255.1c0-11.34 7.406-20.83 18.44-23.61l171.2-42.78l42.78-171.1C235.2 7.406 244.7 0 256 0s20.84 7.406 23.62 18.44l42.78 171.2l171.2 42.78C504.6 235.2 512 244.6 512 255.1z" />
              </svg>
            </span>
            <span class="magic-star">
              <svg viewBox="0 0 512 512">
              <path d="M512 255.1c0 11.34-7.406 20.86-18.44 23.64l-171.3 42.78l-42.78 171.1C276.7 504.6 267.2 512 255.9 512s-20.84-7.406-23.62-18.44l-42.66-171.2L18.47 279.6C7.406 276.8 0 267.3 0 255.1c0-11.34 7.406-20.83 18.44-23.61l171.2-42.78l42.78-171.1C235.2 7.406 244.7 0 256 0s20.84 7.406 23.62 18.44l42.78 171.2l171.2 42.78C504.6 235.2 512 244.6 512 255.1z" />
              </svg>
            </span>
            <span class="magic-star">
              <svg viewBox="0 0 512 512">
              <path d="M512 255.1c0 11.34-7.406 20.86-18.44 23.64l-171.3 42.78l-42.78 171.1C276.7 504.6 267.2 512 255.9 512s-20.84-7.406-23.62-18.44l-42.66-171.2L18.47 279.6C7.406 276.8 0 267.3 0 255.1c0-11.34 7.406-20.83 18.44-23.61l171.2-42.78l42.78-171.1C235.2 7.406 244.7 0 256 0s20.84 7.406 23.62 18.44l42.78 171.2l171.2 42.78C504.6 235.2 512 244.6 512 255.1z" />
              </svg>
            </span>
            <span class="magic-text">chassis.site</span>
          </span>
        </h1>
      </div>
    </div>
    <script type="text/javascript" src="js/main.js"></script>
    <script type="text/javascript" src="js/music.js"></script>
    <script>/*music*/
        var audio = document.getElementById("audio");
        audio.volume = 0.1;
    </script>
    <script>/*music*/
      function play() {
        var audio = document.getElementById("audio");
        audio.play();
      }
    </script>
  </body>
</html>

Answer 1

内边距：0px 80px 0px 500px;

您的汉堡菜单中有此 css，而 500px 左侧填充就是问题所在。

删除该填充并应用此 css 代替它

margin-left: auto;
margin-right: 6rem;

margin-left 会给你右浮动，然后 margin-right 你可以根据你的要求移动你的汉堡按钮，但是我不确定你到底想把汉堡放在哪里，所以你可以根据你的喜好调整 margin-right .