CODEWITHSUNDEEP
cssoverflowcss-position
petesiss
petesiss

Reputation: 994

CSS - fixed side nav should scroll / move if not fully visible

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.

Upvotes: 1

Views: 1614

Answers (3)

Leo
Leo

Reputation: 5286

You should probably used media queries to change the styling of your fixed nav for users with smaller screens. Smaller font-size, padding, whatever.

There is a great article by Chris Coyier explaining CSS Media Queries here http://css-tricks.com/6731-css-media-queries/

Upvotes: 1

Larry
Larry

Reputation: 1248

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.

Upvotes: 1

PatrickP
PatrickP

Reputation: 80

I could think of the solution to add

    overflow: scroll;

To your CCS (I've done this on your fiddle). It's ugly but otherwise your visitors have to buy new screens... Or maybe you can just adjust the font-size?!

Upvotes: 0

Related Questions