Long Logo impacting menu on smaller browswer windows

Hi

Firstly thanks for a great template and all the support you give your users. It’s invaluable.

On the site I am working on the client (for some bizarre reason) has his browser window set very narrow, as a reuslt most of the time he views the site as if tablet mode.

However, one area that has proved problematic is that the long logo he has caused the menu to merge into it before the mobile kicks in.

The way the current site is set-up it works fine – as I have added your suggested CSS changes into my custom CSS areas – tweaked the parameters and bingo it works.

However, I added a work around by ticking the ‘Let logo and menu position adapt to browser window’ – as this gives me a of bit extra room. From his perspective the site is working fine. However, as the designer I know that on an iMac (which I use) the logo and navigation now sit at the edge of the page – which looks odd. Functionally fine, just not aesthetically ideal.

I have tried de-ticking the ‘..adapt to browser’ box and reworking the CSS (reducing the screen width) – but to no avail.

This is the code I have in there currently:

@media only screen and (max-width: 1023px) {
.html_mobile_menu_tablet .main_menu , .html_mobile_menu_tablet #header_main_alternate{display:none;}
.html_mobile_menu_tablet .container #advanced_menu_toggle, .html_mobile_menu_tablet #advanced_menu_hide{display:block;}
.html_mobile_menu_tablet #mobile-advanced{display:block;}
}

As I say it works fine right now, but on the unticked ‘…adapt to browser’ the menu bleeds into the logo.

Any suggestions as to what else I can try.

Thanks

Ben