jquery - Sliding a navbar-fixed-bottom left off screen and back -

the "problem behind problem" want navigational bar along bottom of site. want able put button on bar causes bar slide right way off screen. leftover part of bar button slides onto screen again.

the site uses bootstrap 3 layout, i'm trying implement "navbar-fixed-bottom" has close button on it. i'd use boostrap grid inside nav bar, can lay out icons way want to. (although close button break grid or sit outside of somehow - needs smaller , way left work)

my jquery code sliding coming site: http://www.learningjquery.com/2009/02/slide-elements-in-different-directions/

my jsfiddle: http://jsfiddle.net/8jlxw/4/

the issue i'm having contents of navbar "squish" upwards instead of sliding offscreen. reference site says fix set parent element of sliding element overflow:hidden , example shows working properly.

i dutifully wrapped nav in div overflow:hidden , hasn't helped. i'm guessing either i'm doing wrong or there's bootstrap preventing working properly. i'm not opposed not using built-in navbar-fixed-bottom if simplifies things.

any idea i'm doing wrong or how fix it?

just add width nav:

#mynav {     width: 100%; }