mobile menu / logo problem.

Hi,

I’ve read through a few posts from people having the same or similar problem as this, but despite that… I’m still struggling to find the right solution.

When viewed on a mobile, the menu icon is being pushed down into the content area.

I’ve seen a few replies from the HB support team to add a bit of css that sets the logo size smaller… 85%, 80%, 75%, etc.

None of these have worked for me, and even if they had… they also reduce the size of the logo when viewed on a regular PC/Laptop screen, which I don’t want.

So… is there an alternative solution?

Is there a way to set an alternative version of the logo? Perhaps I could create a square version of the logo that would take up less space, but the site only uses that logo when it detects screens smaller than a certain size, etc?

When re-sizing my browser window on my computer, it seems the menu drops down at one size, and I need to keep going smaller before the logo starts to auto re-size. But, even when the logo starts to shrink… the menu doesn’t jump back up into the header because the logo is re-sizing according to the space it has without the menu icon.

So… is it a case of, somewhere in the css, the break point for the logo to re-size should be set a little higher, so it starts to shrink before the point where the menu icon is pushed down?

As usual… any help appreciated. 🙂

Del.
PS. Screen shot is from my laptop, but it illustrates the problem I’m getting on mobile screens.