Hello, I need some help with my project

HTML-CSS
#1

Hello, I’ve been building my documentation page for the freecodecamp certification of Responsive Web design and I have now come accross something that I haven’t figured out how to resolve.
I created a sidebar that appears and disappears when Clicking a list and cancel icons.
At the beggining I thought It was working well, but when I click any of the links inside the sidebar it directs me to the corresponding place of that page but It sticks because its fixed and does not go away.

so what I actually need help for is for making it disappear when I click on any of the links.
Here a let you some pictures and the pen. You can check it out.
I also have to say that What i’m doing now is for the mobile version so you should resize your screen.

codepen here - https://codepen.io/Mikeavocado01/full/rNYXJYo

Pictures here:

image
image1920×1080 151 KB

image
image1920×1080 148 KB

image
image1920×1080 146 KB

#2

You would need some JS for that.

const sidebarLinks = document.querySelectorAll("#sidebar a");
const navCheckBox = document.querySelector("#check");

function handleCloseNav() {
  navCheckBox.checked = '';
}

sidebarLinks.forEach((link) => {
  link.addEventListener("click", handleCloseNav);
});

Not sure why you have it positioned like it is, but I’m guessing you’re still working on it.

1 Like
#4

Thanks a lot sr. You’ve been a great help. I’m currently taking the javaScript course. Thank you again!