Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

Obama-style fly-out menu - preserving text width

Obama-style fly-out menu - preserving text width

Problem

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.

Problem courtesy of: And Finally

Solution

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%;
}
Solution courtesy of: ryuusenshi

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

Obama-style fly-out menu - preserving text width

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×