Change logo size in mobile X Pro header

[glitchfield]

Hi, I am trying to change the setting for the initial logo size for the mobile version of my website, is there a setting in the X Pro header builder for this?

The site is https://test.glendowercapital.com/

Thanks.

[christopher]

Hi there,

The shrink option is only available for the Bar which you set as sticky, and it affects all the elements inside it. You can override this behavior by setting a maximum width to the image. So add the code CSS code below to Pro > Launch > Theme Options > CSS:

body .x-masthead .x-image-preserve-ratio img {max-width: 100px}

Feel free to change the 100px to whatever size you like. Thank you.

[glitchfield]

That’s worked perfectly for mobile with a media query - is there also a way to adjust the initial height of the mobile header before it reduces?

[mldarshana]

Hi There,

Try using the following CSS rule for that.

.hm1.x-bar {
    height: 80px;
}

Hope that helps.

[glitchfield]

Perfect, thanks for your help.

[basanta]

You are most welcome!