Header and logo size

[Wim Bos]

Hi,

Just got started with Retail Pro,

The header size should be 1900 x 200 according to the theme text. But it get stretched out etc. Can you provide de CSS code for:

1. Changing the header size,

2. Changing the logo size.

Kind Regards,
Wim

[Andy]

Hi Wim

The header image size should only be used as a guide and because it is a background image it will fill the header area, otherwise you could be left with gaps above/below or at the sides of the header area, depending on the space that it has to fill.

If your logo is large or if it is taller than it is wide, then the space that the header background image has to fill may be increased.

A couple of CSS styles that can be applied to the logo in Customize > Additional CSS:

This will remove all the margin space around the logo:

#site-branding .custom-logo {
    margin: 0;
}

As standard, the logo image is set to be a maximum width of 100% of the logo’s container area, so adding this CSS will tell the logo image to be a maximum width in pixels instead of 100% (change 120px to your desired value):

#site-branding img.custom-logo {
    max-width: 120px;
}

Hope this helps.

[Author]

Posts