Help: Hambuger menu Nav links are disappearing once its active

[hustlework53]

I have built my portfolio website one of a FCC Project. I built everything from scratch, But I couldn’t fix hambuger nav links problems. can anyone please tell me whats wrong in this code.
https://codepen.io/HarishCalvin/pen/xxgrjbq?editors=0010

Once if i click hamburger nav link, It will work, if i again click hamburger menu, all nav links are hidden, Please check that codepen in mobile view, and click hamburger menu couple of times, you will understand.

[lasjorg]

Think about the logic you have for the nav li elements and the state they end up in when clicking the links, as opposed to clicking the burger icon. You will end up with the state in reverse and the logic doing the opposite of what it has to do.

You can loop the links inside the for...of click handler and remove the inline styles on the nav li elements.

[imendieta]

Hi @hustlework53

Maybe I can point you some suggestions. I see that your whole code functionality is done in one whole function. In addition to that, you have an eventListener inside the function, this can be tricky and can have wear behavior in your code. This is important because a well-structured code will always be easy to read and some other developers can actually make changes to the code as well. The less code you do in a whole function the better, long functions can be hard to read and follow.

You need to have separate functions for each task that you are doing, for example:

You want to create a function called

function closeOpenBurger()

this will allow you to

1. Click on the burger icon. A new function will have to be created, this will allow you to toggle the close/open burger icon

2. In addition to that function you can add extra functionality like showing and hiding the menu links.

You can create another function called:

function scrollToDiv()

This function will allow you to smooth scroll the active links in the page.

Note: Remember that if you want to scroll links and target them in the same page you don’t need to add anchor links, instead you can add data-id in order to target the id of the div’s where you want to scroll.

There are good developers here I’m sure they will help you get a better understanding of code structure and not repeat yourself. Just ask them questions.

Hope this helps.