I have a website that was designed to have a side menu running along left side of the screen from top to bottom. Works great, looks great, but I'm having some issues when it comes to making it responsive.
The way the side menu was designed, when open it "pushes" the web content to the side a bit so the menu has enough space to exist. Obviously, this creates a bit of an issue on mobiles as it eventually pushes the main content into a space far too small to exist in.
My original idea for solving this problem was to remove/hide the menu when browsing from a small device, however it seems like a really bad idea to remove navigation.
The new/current running idea would be to modify the side menu so that on mobiles, instead of pushing content to the side, rather it appears over the content. However, I have been told that it seems like bad design to have a menu appear over content on a page, hiding said content from the user.
I've created a basic mock-up of the situation here: http://jsfiddle.net/dv64q6xf/1/
Would it be bad design to allow this side menu to embark on top of the main content? Alternatively, would there be a better way to handle this?