Question

I’m trying to build a responsive nav menu like the one on http://www.barackobama.com. (See my JSFiddle http://jsfiddle.net/andfinally/VvWWh/.) On smaller screen widths, when the user clicks the “Menu” link, the main page content slides away to the right, out of the viewport, revealing the nav menu below. I’m doing this by applying the class .show-nav to the html element on this event, which repositions the content in #main. #main has a 1 second transition CSS rule to make the movement smoother.

This seems to work OK so far in Chrome when you open the nav. But when you collapse it again, the text in the content area rearranges itself. Can anyone explain how the Obama guys managed to prevent this happening? I’d like the content to slide off and on like one static object.

Answer 1

It’s because your content div doesn’t have a fixed width.

If you fix the width of #main to, lets say 90%, it’ll work as you want it to.

i.e. add this to your css:

#main {
    width: 90%;
}