Question

I have a site with a fixed header and fixed side nav, and scrolling content.

I’ve found that on some pages, users with smaller screens can not access all the menu items as the fixed side-nav extends off the bottom of their screen.

Is there any way round this?

I did a quick mockup to illustrate.

http://jsfiddle.net/cr0wn3r/ycTXF/

It’s all fine till you shrink your browser, and then you see the leftcol goes off the bottom of the screen and there is no way to scroll to it.

Answer 1

Using media queries, you can detect the size of the viewport, and then conditionally style your sidebar accordingly (perhaps placing it after all the content if the height of the viewport is too small).

This article by Ethan Marcotte explains well what you can achieve with responsive sites, while this site demonstrates how different viewports can be handled.

The key is to use media queries to handle different viewports correctly.