Kevin Powell - Community•13mo ago

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;
  }
}

19 Replies

epic•13mo ago

const primaryNav = document.querySelector(".primary-nav");
const navToggle = document.querySelector(".mobile-nav-toggle");

navToggle.addEventListener('click', () => {
  const visibility = primaryNav.getAttribute("data-visible")

  if (visibility === "false") {
  primaryNav.setAttribute("data-visible", true)
  navToggle.setAttribute('aria-expanded', true)
  } else {
    primaryNav.setAttribute("data-visbile", false)
    navToggle.setAttribute('aria-expanded', false)
  }
});

const primaryNav = document.querySelector(".primary-nav");
const navToggle = document.querySelector(".mobile-nav-toggle");

navToggle.addEventListener('click', () => {
  const visibility = primaryNav.getAttribute("data-visible")

  if (visibility === "false") {
  primaryNav.setAttribute("data-visible", true)
  navToggle.setAttribute('aria-expanded', true)
  } else {
    primaryNav.setAttribute("data-visbile", false)
    navToggle.setAttribute('aria-expanded', false)
  }
});

please ping me if you have found the anwser

Mannix•13mo ago

@epic you have a typo ("data-visible", false) not ("data-visbile", false) @epic

ἔρως•13mo ago

you are also using 2 different attributes to do the same thing just stick to area-expanded you can style the <nav> to be hidden by doing button[area-expanded="false"] + nav { display: none; } also, instead of the <ul> consider using <menu>

epic•13mo ago

thank you i will playtest

epic•13mo ago

im just going off this tutorial https://youtu.be/HbBMp6yUXO0?si=OOwaCHywt_2mqTMC but this could of changed since this is 2 years ago

Kevin Powell

YouTube

Responsive navbar tutorial using HTML CSS & JS

You can find the Frontend Mentor project here: https://www.frontendmentor.io/challenges/space-tourism-multipage-website-gRWj1URZ3 And the free Scrimba course here: https://scrimba.com/learn/spacetravel 🔗 Links ✅ Why I use HSL: https://youtu.be/Ab9pHqhsfcc ✅ More on feature queries (@supports): https://youtu.be/wPI8CEoheSk ✅ More info on .sr-...

ἔρως•13mo ago

im not saying the tutorial is wrong, im just saying that there is a more efficient way of doing it

epic•13mo ago

ok im gonna make those changes after i finish the video

ἔρως•13mo ago

that is a good idea stick to the video, then try it out

epic•13mo ago

the button still does not wrk i might have to use a different tutoiral if this does not work

ἔρως•13mo ago

does it show any errors in the console? because "doesnt work" is super broad it can vary from memory errors, bad hardware or even display bugs to the javascript being loaded before the element exists

epic•13mo ago

its sending nothing its the inspect console correct? its sending just nonthing wait i dont have the code to log it

ἔρως•13mo ago

can you take a screenshot? or, better yet, make a codepen or jsfiddle, and try it there

epic•13mo ago

of my console? or smth else

ἔρως•13mo ago

console and element inspector but, just do the codepen thingy and we try it ourselves

epic•13mo ago

wait what.. it works in the JS fiddle nah bro so my code works in JS fiddle but now im getting a error on the actual website new.js:4 Uncaught TypeError: Cannot read properties of null (reading 'addEventListener') at new.js:4:11

epic•13mo ago

https://jsfiddle.net/7ncvkmfh/4/ @ἔρως

Edit fiddle - JSFiddle - Code Playground

Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor.

ἔρως•13mo ago

add defer to the script, if it is in another file if it is in the same file, move it to the end of the <body>, as the last element there

epic•13mo ago

const primaryNav = document.querySelector(".primary-nav");
const navToggle = document.querySelector(".mobile-nav-toggle");

navToggle.addEventListener('click', () => {
  const visibility = primaryNav.getAttribute("data-visible")

  console.log(visibility)
  if (visibility === "false") {
  primaryNav.setAttribute('data-visible', true)
  navToggle.setAttribute('aria-expanded', true)
  } else {
    primaryNav.setAttribute('data-visible', false)
    navToggle.setAttribute('aria-expanded', false)
  }
});

defer

const primaryNav = document.querySelector(".primary-nav");
const navToggle = document.querySelector(".mobile-nav-toggle");

navToggle.addEventListener('click', () => {
  const visibility = primaryNav.getAttribute("data-visible")

  console.log(visibility)
  if (visibility === "false") {
  primaryNav.setAttribute('data-visible', true)
  navToggle.setAttribute('aria-expanded', true)
  } else {
    primaryNav.setAttribute('data-visible', false)
    navToggle.setAttribute('aria-expanded', false)
  }
});

defer

like this fixed it DEFER FIXED YESSSSSSSSSS alr solved now

ἔρως•13mo ago

awesome!

Gaming

Programming

responsive mobile button isnt working