Secondary Content

Demo of a Responsive Sidebar in a Modal Window

This is a demo of a responsive sidebar by using a modal window.

If you view this page with a mobile phone - or with a big screen device and make the browser window small like the size of a mobile phone - you will see the sidebar below the main content area, and a sidebar button (secondary content button) at the top of the page.

To view the content of the sidebar you can then either scroll down to it, or click the button to bring the sidebar up in a modal window.

Main Content

Structurally this text (and the demo description text above) is the primary/main content since it comes before the content in the sidebar.

If - when viewing this page on a device with a small screen - you wish to view the content in the sidebar (secondary content), you don't have to scroll all the way down below this content area. Instead you can click the button at the top of the page (only visible on small screens, or by reducing the width of the browser window) for bringing it up in a modal window.

For the purpose of this demo this content area (main content area) has a min-height of 4000px.