navbar-form on mobile device breaks to new line

[rinseringma]

Hello all,

I have a navbar with an image on the left side acting as a button. When you click it, the form (2 input field) in front of it (hidden) will slide to the left. That's done with jQuery by setting the width of the div and so pushing the image/button to the left.

In normal mode (desktop/landscape tablet) the animation works perfectly, but on portrait mode on tablet and on mobile phones, the animation does it's job, but it's pushing the menu button from Bootstrap and the image/button to a second line.

What I want it to do is, when the form slides to the left, I want it to stop when the image/button is against the side of the viewport/screen and the menu button to dissappear.

I have tried everything, but it doesn't seam to work. Is there someone who can help me with that?

Kind regards,

Rinse Ringma
The Netherlands

[mdo]

Sorry, but jsFiddle or bust I'm afraid. Unsure if we can help with that anyway since it's not a bug, but a custom implementation.