Responsive nav-bar Issue

Responsive nav-bar Issue
0

Hello! I’m a newbie in the programming world so I’m asking for help here with the next problem:
I created a hamburger menu to make my web mobile responsive, but when I click at an anchor link it drops me down to the section but the menu still open, so I need help to fix that :slightly_smiling_face:

I tried to put the web in a codepen but the issue doesn’t look like the problem I have so I leave the codepen for you to see the code and an image of the issue.


Hope someone can help me fix this without using something like bootrap4 or related (I only used Html & CSS, and javascript for the hamburger).
Thanks for your time.

I add an EventListener to each nav-link item so that when one of the links is clicked the open CSS class is removed:

const responsive = document.querySelector(".responsive");
const navLinks = document.querySelector(".nav-links");
const links = document.querySelectorAll(".nav-links li");
responsive.addEventListener("click", () => {
    navLinks.classList.toggle("open");
});
links.forEach(link => {
  link.firstChild.addEventListener('click', () => {
    navLinks.classList.toggle('open');
  });
});
1 Like

Hey!!
What do you thing about this:
Add this to you js.


navLinks.addEventListener("click", function(){
  responsive.click();
});

I hope I helped !!

1 Like

Thank you so much both of you, now is working great! I hope someday I know as much as you guys!

Hey! checking how works it seems that I can actually scroll when the menu is open. How I can fix that? sorry for asking something more hehe

Have a look at the overflow css property.

1 Like

Hello Sgedye, you mean this code right here?

document.getElementById("myDIV").style.overflow = "hidden";

I saw it when I was investigating about how to fix my problem but I don’t know what would be my “getElementByID” or how to toggle it when the menu is open if you can help me with that I would be very grateful

Ah you mean you want to stop the background from scrolling, rather than adding scrolling to your menu…
I would probably just set your margin (and padding) to 0 in your purple mobile menu and set your hamburger menu to fixed rather than absolute and not worry about it (as the user will not be able to see the scrolling). Haha, maybe it’s a bit of a hack… but should be good enough =D

Trying what you say (margin & padding in .nav-links.open and set position fixed to .responsive, right (?) but it didn’t work at all, but playing a little with z-index, if I put z-index 1; to .nav-links.open, it kinda works. I mean, when I scroll things doesn’t show, and when I close the menu, it seems a little buggy but it kinda works well so yeah haha, anyways ty