Page turns blank after clicking on JS

Hi, I’m trying to add a sliding menu bar on the side instead of it being fixed on screen or right at the top especially on mobile. So I added a script to shift the main page to the right 300px and shift the menu out 300px too, and a close button to do the reverse.
However, the page seems to turn blank right after I click on the “bars” menu button that I have added. Not sure where went wrong…would really appreciate any help on this, thanks!

Here’s what I have at the moment: https://codepen.io/JayYong/pen/yqYrgM

Hello Jay,

Change your open and close functions to something like my_open() and my_close().
open is an internal JS function(of object window)(same about the close function) that opens(redirect) another url as input. Since there is no input, it goes blank.

You also note the wrong place of open tag html, also considering add head and body, same closing html tag.

Good practice: this is a good practice to apply a prefix to all your functions and resources(like ids) to your identifiers, for example all function,s ids,… start with JC_ (Jay Codes) or anything else you like.

Keep going on great work, happy coding.

1 Like

On a side note, try changing your #navbar’s position property to fixed, so that when you click on one of the nav elements, the navbar still shows. This way, you do not have to scroll back to the top to click a different nav element.

1 Like

Thanks so much for the prompt reply, glad I asked…never expected something like that to be the cause. Will take try to put the good practice into use too. Have a good one, cheers!