I am trying to create a search bar that slides in when a button is clicked. I am using translateX(-100%) to position it off screen. However when I do this it adds a horizontal scroll to the page allowing you to scroll right and see the hidden search bar. I have tried a combination of position absolute on the search-bar and overflow-x: hidden on the header div.

 

See it action here: http://www.cqwebdesign.co.uk/saverplaces%202.0/TEST/index.html

 

Please view it on small screen as its built for mobile screens.

 

Thanks

 

Can you take the search element(s) out of the container? If it is not in the container then the container will not expand to incorporate the position.

 

EDIT:

 

BTW, when I went to your site, I did not see any horizontal scroll bars at all. However, when I make the width less than 1600p I get (2) vertical scroll bars

Edited December 5, 201411 yr by drt_t1gg3r