Sidebar with responsive content


I’m trying to use a sidebar on the left of my website, but I want it to NOT pushing the content out of view when sidebar is visible. Instead, I want the content area to be responsive by shrinking the content area a little bit to make space for the sidebar.

Overlay is not an option because the sidebar will be visible for most of the time as a main site navigation menu, and apparently overlay will block part of the content and cannot be used for my case.

Here’s a good example of what I’m trying to do with Semantic UI sidebar.

Note how the sidebar slides out without pushing the content out of the right edge of screen.

Your help is much appreciated. Thanks!