TL;DR - How can I make my side-menu slide out over the top of the other page content (revealing it’s cool opacity) rather than pushing all the page content to the right and looking less awesome. ( code is here Web Journal Project )
Hi, i’m about a month and a half into my second attempt at learning to code, I’ve just started my first real project that I’m planning on using to enjoy the ride as I improve my skills. The general idea is an online journal, kind of like a blog but mostly for my own use, I might deploy it one day but I doubt it.
The web journal will have separate pages for my goals and a gallery of people I admire, but the majority of the site will be daily journal entries on my daily life, coding efforts, etc. Every couple days i’ll try and do something different with the page to grow my skill-set but it’s really just a fun project to keep me motivated and provide me something to refer to when in doubt that I’m progressing.
The area causing me trouble right now is my side menu, this will be the equivalent of an index to my journal. Whenever I click the “read more” button to expand the side menu, rather than sliding out over the page content and revealing the cool looking semi-transparent menu; it pushes all the content to the side and doesn’t show it’s cool opacity.
It’s now 2:20am and I haven’t been able to fix the problem I’ve been dealing with for last couple hours so I figured i’d put it on codepen and ask for some help so hopefully tomorrow I have a good idea of where to start.
I’ve included my codepen link in the TL;DR at the top, i’d really appreciate if someone can help me with this 
