Cant hide overlay on clicking page links

1

I have been struggling for weeks to find a solution. If you take a look at the link below (im a noobie sorry for the low standard of coding) I cannot get the overlays’ visibility to hidden when i click on the <a>, it does bring me to the correct section of the web page but the overlay is still visible. I would really appreciate some advice. Cheers folks! https://andrewire1970.github.io/portfolio/

2

Welcome, andrewire.

I have edited you post for readability. For future posts, please wrap your code in backticks. Especially, HTML, as the text reader will treat the HTML text as code.

1 Like
3

This is not your main issue, but there are typos in your code:
image
I cannot imagine why class is spelt with 3 s so many times.

1 Like
4

I do apologise for the readability, it was my first time posting my code/ asking for advice. I was using the prettier extension for a long time now but realised it would bug out and autocorrect <img src="pic_trulli.jpg" alt="Italian Trulli"> to <img src="pic_trulli.jpg" alt="Italian Trulli"></img> amongst other things so i deleted the extension but I should have went through my code to look for further issues. Thank you so much for bring this to my attention. Im trying to get back into web dev after some time off so there is some rust plus a huge lack of knowledge.

5

To answer your question:

Add this to the bottom of your app.js file.

let nav = document.getElementById('nav');
document.getElementById('ham').addEventListener("click", () => {
  nav.style.visibility = 'visible';
});


for (tog of toggle) {
  console.log(tog)
  tog.addEventListener("click", () => {
    nav.style.visibility = "hidden";
  });
}

Add an id="ham" to your input, and id="nav" to the div with class="menu". I know I could have done it with the classes, but I am much more comfortable selecting elements with ids.

Explanation: Your original function was not working, because you were trying to add one eventListener to an array of elements - namely, toggler. That is why I am using the for loop to add one event listener to each.

I hope this helps. It is not a pretty fix, by far.

PS. There is a bug where you have to click the input twice to get it to show. I leave it to you to tinker.