Warum wird mein Hamburger-Menü nicht auf meinem Telefon angezeigt?

Auf meinem Handy kann ich auf die Stelle klicken, an der er sein sollte, und ein Dropdown-Menü erscheint, aber aus irgendeinem Grund ist der Burger selbst nicht sichtbar. Wenn ich die Website in der mobilen Ansicht auf dem Desktop ansehe, ist sie sichtbar, daher bin ich verwirrt. Ich suchte überall nach einem Versteck, aber ich sah nichts. Jede Hilfe wird sehr geschätzt. Der Website-Link lautet wie folgt:

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>

P粉295616170331 Tage vor435

Warum wird mein Hamburger-Menü nicht auf meinem Telefon angezeigt?

Antworte allen(1)Ich werde antworten