This is my first website that I'm trying to build purely by code (usually use Webflow) and I can't get the navbar to work properly. I think it's a javascript problem and I really have no clue with that.

It was working for a while, and I then checked it after a lot of additions and it wasn't working.

Could anyone look over the code and see why the navbar won't open and also is visible on the right side when it is closed.

https://cyan-aeriel-49.tiiny.site

I don't want to mess about with the JS as I followed a tutorial and really don't know what I'm doing. I tried changing the right position on the .nav-items and it came up with an error.

CodePudding user response：

It seems that your problem is with your media queries, for some widths of the screen, the navbar opens perfectly and for others it doesn't.

Here is a tutorial for that: https://www.w3schools.com/css/css3_mediaqueries.asp

Also I noticed lots of inline styles have been added to your elements. Try using a separate .css file with classes inside that will help organizing your css styles.

CodePudding user response：

So if you use a browser JS debugger it seems that all animation for the menu (regardless of media used: desktop, tablet, etc.) is contingent on div.burger, which is only visible when the screen size is below a certain threshold

Since .burger is display: none on desktop view, none of the event listeners get attached to clickable elements, and you get nothing happening on the frontend.

I highly recommend using a browser debugger, such as FireBug to identify problems with your js