Overlay Drawer: How to position a header?

I’d like to add an overlay drawer, which will essentially function the same was a slide-out menu used for tablet/phone menus.

I want to add a header that sticks/is fixed to the top of the page, and have the container below it scrollable.

The best I can come up with is to “position:fixed;height:80px the header”, and then “position:fixed; height calc(100vh - 80px)” the main content wrap.

I’ve attaced a photo of what I am after. I can’t add a link, since the development server is behind a firewall.

Hi, @jeremy58

I would suggest to use Flexbox for this task.

Here is a demo I made for you, feel free to modify and use it


I see that @veocode has already given a good solution but as I’d started I may as well post anyway :slight_smile:

You could have made the header position sticky and then use top:0 and bottom:0 to size the whole thing, Then you wouldn’t need calc for the header height and no magic numbers etc.

I just added the effect to an old grid page I had set up so the grid layout has nothing to do with the effect.

As I said above the code from @veocode is also fine and doesn’t need magic numbers either.


I like the smooth animation:)

Is it possible to have the toggle button use only CSS because I’m always concerned that the user may have JavaScript disabled?

1 Like

You can use the checkbox hack or :target as a fallback.

e.g. I’ve just added :target to the demo as its more semantic than the checkbox hack.

The css checks for a .nav-on class which was added by JS and implements the slide. If the nav-on class is missing (body:not(.nav-on)) then the css uses the :target method instead.

The only difference will be that once you click a link in the side nav the menu will close (which is generally what you want anyway). If you want ‘in page’ links inside the sidebar then use the checkbox hack instead.

Many thanks, I’m looking forward to trying the script on the desktop and to include into my examples for future usage.

1 Like