Wider Logo – Responsive Issues

Hi,

I’m building a site using Enfold which is currently at http://www.choicesflooringwodonga.com.au/site/

The problem I have is that I’m using a wider logo which looks good at a large size, and good when the full width responsive drop down first menu kicks in.

But for any “in between” sizes, the menu items go over the top of the logo and functionality is impaired in various ways,
– Full width, it looks great. then getting narrower…..
– Menu goes over the top of the logo
– Menu changes to a poorly aligned small version of the logo
– Drop down menu goes over the top of the logo
– Drop down menu then goes full width and works perfectly
– Finally the logo gets cut off and doesn’t scale down.

The logo size is 500px x 87px .

Obviously there will be CSS changes required to fix this, but i’m stuck working out how. I don’t want to make the logo smaller.
Is there a way to either set the logo area to the width of the logo itself, and then have it scale down as required (ie 100% width rather than a pixel based width) to suit the size?.
OR any other suggestions to improve this for me?

Thanks in advance
Matt