https://codepen.io/TuscannyCodes/pen/jOBLaMg
Ive been working on this responsive Solar Company website for about a week now and cannot for the life of me figure out why the hamburger button is not working.
Firstly, the hamburger is set to only appear when the width of the website is no larger than 600px. So if you would like to see it, you will have to shrink the page width. I did this because naturally, I only want the hamburger navigation to appear once the website is viewed on a smaller device. This element is working perfectly.
Now the issue is, that I have a #navBackground that I want to slide in from the right hand side of the page when the hamburger is clicked. But for some reason, I can’t get it to work and Im not sure what the issue is.
^function to run with html onclick attached to hamburger div.
^css of class to be added
Ive done projects similar to this that are posted in CodePen but, this one is different because the hamburger menu is a responsive element.
Any advise on where Im messing up here?
Im trying to onclick and make the card that slides in visible by changing the display to flex and have it slide into view by adding the class of .navClose.
Open up your browser’s DevTools console and look for any error messages in the console when you click the button.
1 Like
You have this Error:
Uncaught TypeError: document.getElementById(...).style.display is not a function
at navFunction (pen.js:14)
at HTMLDivElement.onclick
1 Like
Yes I am aware of the errors.
I don’t know what this means. Everything looks fine to me… The syntax looks correct. What could be the issue here?
Ive seen this, but I don’t understand what is going wrong.
You didn’t mention the errors in your original post so I didn’t realize that you were already aware of them. The line of code that is causing the error is:
document.getElementById("navBackground").style.display("flex");
That is not the correct syntax for setting a CSS property. I suggest you use your favorite search engine to search for “javascript set css property”.
1 Like
Ah got it 
. Yeah I will remember to mention that in my future posts. Often times the error messages don’t help me much, but im still actively working on understanding them more because when I do actually understand them they (obviously) really help me out.
I’ll look into what Im doing wrong here.
Thanks BB.
I fixed that syntax issue. But it’s still not working. I have some missing semi colon errors on another function, but im leaving that for now because that particular functionality is working fine and I would like to focus on the part that isn’t.
Any clue why the menu card is not sliding out onclick?
It seems to me that the button is not doing anything. Which is weird to me because I have an onclick set up that specifically changes the margin-left element.
Ok, so for some reason its not working in codepen but it works when I run it locally with live server. No problem. Don’t know why that is, but at least I know that its working now. Not sure why it won’t work in codepen but at least I know that im not crazy now 
That was super frustrating because I knew the code was right but I wasn’t seeing any changes. I guess that what I get for working in codepen.
Actually im still pretty lost. The classList.Toggle is not working so I decided to use another approach. But now I can get the menu to appear but not to retract back to its original position…
I don’t know what’s going on with this. Can someone help?
function navFunction (){
if (document.getElementById("navBackground").style.marginLeft="30em"){
document.getElementById("navBackground").style.marginLeft="0em";
};
}
This is the code I’m currently seeing in your codepen. What are you trying to do here? I will remind you that = and == and === are all different things and = is not typically used in the condition of an if statement because it does assignment, not equivalency.
1 Like
Because the classlist.toggle seems to not be working for me in this situation, I decided to use if statements to toggle the margin left style property, which is what the toggle would have been doing essentially if it were to have been working.
So I was trying to set up an if statement basically saying if the margin is 30 (which is not visible) set it to 0 (which is visible). This works!
However for some reason, I tried setting another if statement that works in the opposite way basically saying if the margin is 0 (which is visible) set it to 30 (which is not visible). But this will not work for some reason.
This is just my way of trying to work around the classlist.toggle that I tried to get to work but would not.
yes this is true and I am aware of this. I tried using double and triple equals for the conditionals but still did not work when clicking to close the menu.
So right now it seems to only work when opening the hamburger menu. I don’t know why it won’t close.
It works, but not for the reason you think. You are using the equals sign in the if condition, so
if (document.getElementById("navBackground").style.marginLeft="30em"){
is always setting the left margin to 30em. It is not checking if the left margin is currently 30em. This assignment returns the value “30em” and thus the condition always is true and the statement inside of the if block is executed.
If you want to check for equality then you need to use === in the if condition.
1 Like
Yes I understand this.
When I try using the triple equal or double equals, the function will not fire at all.
Well that is probably an error with your code, not with using the equality operator. Why don’t you try it again using === and if it doesn’t work please leave the code in place so we can look at it and help you.
1 Like
Got it 
Ive updated the code with he triple equals.
Not sure why this is not making the nav appear, because semantically it certainly makes sense. There must be an error im missing 
Thanks for your help I really appreciate it.
This link might help you figure out why your code isn’t working.
Personally, I would not test the left margin to determine if the menu is showing. Typically, you might toggle a class on the menu.
1 Like
I would actually prefer to use a class toggle, but it was not working so I tried to use a work around.
Do you have any idea why my class toggle isn’t working?
I’ll update the codepen with the class toggle.
