Responsive nav-bar Issue

1

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.


Captura
Captura831×888 40.6 KB

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.

2

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
3

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


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

I hope I helped !!

1 Like
4

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

5

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

6

Have a look at the overflow css property.

1 Like
7

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

8

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

9

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

10

I mean you can do something like this:

<body style="margin: 0;">
<ul class="nav-links" style="margin: 0;">
<div class="responsive" style="position: fixed;">

Note, I have just updated these values (margin and position) using the web inspector… but it would probably be better to do it in your css.

With these changes, the use can still scroll, although they won’t see any change until they close the menu and the menu extends over the whole page (margins are zero) and the menu is fixed in position (position: fixed). I think that will get you 90% of where you want to go.

To get the last 10%, and to turn off scrolling entirely, you can set overflow to hidden when the menu is open

<body style="margin: 0; overflow: hidden;">

But note that you will have to add some JS functionality to toggle this overflow property on and off based on whether the mobile menu is open or not.

Hope that helps. Happy coding :slight_smile: