How Do I Stop Overlapping Of Logo In Header?

I am using the ALT template.

When I shrink the width of my browser (to tablet or mobile sizes), I am getting an overlap between the search box, logo and account info/login text across the top (image attached).

How do I stop this from happening? I'd like logo as it currently is, with search box and account/login text either above or below it.

Not sure what to change in the general.css file.

Thanks for any suggestions!

The default template isn't responsive, this is the reason it isn't look good on mobile.

We will make template responsive in 7.2 version.

For a while I would suggest to use some of 3rd-party responsive templates which are available in the market:

http://www.boonex.com/market