epic Posts - Answer Overflow

epic

•Created by epic on 9/29/2023 in #front-end

responsive mobile button isnt working

im currently following a tutorial on how to create a responsive navbar put im struggling as i cant make the mobile button to work i use no libs on my site here is all my code needed HTML

<header class="primary-head flex">
  <div>
    <img src="./images/smallicon.png" class="logo">
  </div>

<button class="mobile-nav-toggle" aria-controls="primary-nav" aria-expanded="false"><span class="sr-only">Menu</span></button>

  <nav>
  <ul id="primary-nav" data-visible="false" class="primary-nav flex">
    <li class="active">
      <a href="new.html">
      <span aria-hidden="true">00</span>Home
      </a>
    <li>
        <a href="new.html">
        <span aria-hidden="true">01</span>Download Center
        </a>
      <li>
        <a href="new.html">
          <span aria-hidden="true">02</span>Chat
          </a>
  </ul>
</nav>
</div>
</header>

<header class="primary-head flex">
  <div>
    <img src="./images/smallicon.png" class="logo">
  </div>

<button class="mobile-nav-toggle" aria-controls="primary-nav" aria-expanded="false"><span class="sr-only">Menu</span></button>

  <nav>
  <ul id="primary-nav" data-visible="false" class="primary-nav flex">
    <li class="active">
      <a href="new.html">
      <span aria-hidden="true">00</span>Home
      </a>
    <li>
        <a href="new.html">
        <span aria-hidden="true">01</span>Download Center
        </a>
      <li>
        <a href="new.html">
          <span aria-hidden="true">02</span>Chat
          </a>
  </ul>
</nav>
</div>
</header>

CSS

.logo {
  margin: 2rem;
}

.primary-head {
  align-items: center;
  justify-content: space-between;
}



.primary-nav {
  list-style: none;
  padding: 0;
  margin: 0;

  background: hsl(0 0% 100% / 0.8);
}

@supports (backdrop-filter: blur(1rem)) {
  .primary-nav {
    background: hsl(0 0% 100% / 0.8);
    backdrop-filter: blur(1rem);
  }
}

.primary-nav a {
  text-decoration: none;
}

.primary-nav a > span {
  font-weight: 700;
  margin-inline-end: .5em;
}

@media (max-width: 35em) {
  .primary-nav {
    position: fixed;
    inset: 0 0 0 30%;
    padding: min(20vh, 10rem) 2em;
    flex-direction: column;

    transform: translateX(100%);
  }

  .primary-nav[data-visible="true"] {
    transform: translateX(0%);
    transition: transform 350ms ease-out;
  }

  .mobile-nav-toggle {
    display: block;
    position: absolute;
    z-index: 9999;
    background: url(./images/menu_FILL0_wght400_GRAD0_opsz24.svg);
    background-repeat: no-repeat;
    width: 1.75rem;
    aspect-ratio: 1;
    top: 2rem;
    right: 2rem;
    border: 0;
  }
}

.logo {
  margin: 2rem;
}

.primary-head {
  align-items: center;
  justify-content: space-between;
}



.primary-nav {
  list-style: none;
  padding: 0;
  margin: 0;

  background: hsl(0 0% 100% / 0.8);
}

@supports (backdrop-filter: blur(1rem)) {
  .primary-nav {
    background: hsl(0 0% 100% / 0.8);
    backdrop-filter: blur(1rem);
  }
}

.primary-nav a {
  text-decoration: none;
}

.primary-nav a > span {
  font-weight: 700;
  margin-inline-end: .5em;
}

@media (max-width: 35em) {
  .primary-nav {
    position: fixed;
    inset: 0 0 0 30%;
    padding: min(20vh, 10rem) 2em;
    flex-direction: column;

    transform: translateX(100%);
  }

  .primary-nav[data-visible="true"] {
    transform: translateX(0%);
    transition: transform 350ms ease-out;
  }

  .mobile-nav-toggle {
    display: block;
    position: absolute;
    z-index: 9999;
    background: url(./images/menu_FILL0_wght400_GRAD0_opsz24.svg);
    background-repeat: no-repeat;
    width: 1.75rem;
    aspect-ratio: 1;
    top: 2rem;
    right: 2rem;
    border: 0;
  }
}

49 replies

Gaming

Programming