Hi, I've posted on here before for help with a site and thanks to some help I found on here, the site is almost done but I need some assistance with the hamburger menu

Here's a fiddle with the code I'm working with https://jsfiddle.net/wLx2oec6/7/

Essentially I wanted to make a hamburger menu that only loads in mobile and when in mobile view it and a specific logo were the only thing visible along the top, kind of like in this image, except with the logo better aligned https://i.webcomicshub.co.uk/firefox_7KGXo4mOF9.png

Upon clicking on the hamburger menu bars, I'm using the font-awesome ones, it would then just pop out the menu items, maybe on top of the page or pushing the page contents down. I do not mind either.

As of now, I managed to get the bars in and make them clickable but no amount of styling I'm doing is making things look as envisioned. Here's an attached image of my hope for it to look like in case my explanations aren't clear enough https://i.webcomicshub.co.uk/mspaint_sD2VMgaokW.png