仅使用CSS进行画布外导航

Question

I am trying to set up an off canvas navigation using only CSS. Basically I want the navigation to be 20% width and have it behind the main content and then when you click the menu icon, the header and body content will slide 20% off the right hand side of the screen and the navigation will be revealed.

I've almost got it working based off a similar implementation(although they were doing it with width and not positioning) but I am struggling with the last little part.

Here is my pen

Any ideas?

Thanks!

Answer 1

Just add background: #fff; to .content style definition. It will do the trick.