Custom navbar issues

I’m trying to modify my navbar so that a menu bar appears on the left side of the screen when clicking the menu button:

I made a new div for my navbar links, so that they don’t disappear when the menu icon shows.

The only thing I want to happen is that a left bar like this appears when clicking the menu icon:


At the moment, I’m not sure how to show the left bar of menu links when clicking the menu icon. The default navbar only shows the menu icon when the screen is small enough, and at the same time hides the navbar links. However, I need all the navbar links and the menu button to show at the same time.

Any ideas on how to make this work? I need to add more links in the left bar than what my navbar is comprised of as well.

The problem has been solved, reflected in the updated preview.

Hey there

I am designing a custom navbar that should allow a user to click outside it for the navbar to close. There is also a transparent background that should appear once the navbar is opened, and then disappear once it is closed.

Even though I use exactly the same animation for when someone clicks on the close button and background, when clicking on the background only the background disappears.

I’m not sure why this is the case, because both the close button and background use the same animation sequence when clicked on.

Here is the site: