Mobile header fix required

bobbyd

I have used CSS to increase logo size:

.header-horizontal .logo-container a.logo {
max-width: 270px;
}

but on mobile version the button is being cropped off. Is there a way to make the mobile version logo smaller via CSS to avoid this?

Air

Hello :-)

Link to site please, so I could experiment in firebug with it.

With kind regards.

bobbyd

sent link via PM as it’s not a public site yet. thanks.

Air

Try such custom CSS:

.header-horizontal .logo-container {
    min-width: 150px;
}

With kind regards.

bobbyd

thanks - great that works! Is there a way i can also adjust the padding on the button and menu so the are centred with the logo. i.e. move them down by 10px or so?

Air

Adjust padding on logo instead, as it is centered with logo, but your logo is not created to be centered :-) Drop top padding of logo for mobiles to 8px and it will look nice.
Customizing ▸ Header settings ▸ Logo ▸Padding for mobile header

With kind regards.

bobbyd

thanks, that does the trick!