Site header logo width custom CSS - Squarespace 7.1

Hello, I'm trying to make my site logo bigger (or wider more to the point!) than Squarespace 7.1 allows in the header customisation settings. So I have tried using this custom CSS code:

.header-title-logo img {
    max-width: 700px;
}

When I try using this custom CSS to get the logo to the correct size - the logo is made the correct size but goes off to the right instead of staying centred!? How can I keep it centred all the time on desktop?

Attached are screen grabs before and after I apply this custom CSS

Can anyone help?

Will be eternally grateful

Thanks a million

3 hours ago, MadaRekcorc said:

Hello, I'm trying to make my site logo bigger (or wider more to the point!) than Squarespace 7.1 allows in the header customisation settings. So I have tried using this custom CSS code:

.header-title-logo img {
    max-width: 700px;
}

When I try using this custom CSS to get the logo to the correct size - the logo is made the correct size but goes off to the right instead of staying centred!? How can I keep it centred all the time on desktop?

Attached are screen grabs before and after I apply this custom CSS

Can anyone help?

Will be eternally grateful

Thanks a million

Hi , Will you please share website link so we can guide you in a better way.

Hi there,

https://koala-flugelhorn-fz2d.squarespace.com

Many thanks!

PW:

AC6000!

On 5/8/2022 at 5:37 AM, MadaRekcorc said:

Hi there,

https://koala-flugelhorn-fz2d.squarespace.com

Many thanks!

Add to Design > Custom CSS

/* Logo size */
.header-title-logo img, .header-title-logo a {
    max-height: 400px !important;
}
.header-display-desktop {
    flex-direction: column;
    justify-content: center !important;
}
.header-title-nav-wrapper {
    flex-direction: column;
}
.header-title {
    width: 70% !important;
}

Thank you! This seems to work perfectly for the desktop site, however when I preview in mobile - the logo goes really small and I'm unable to adjust its size with the slider within logo options?

Would I need further CSS to adjust the mobile logo size independently?

On the mobile version: I would also ideally have the burger sit underneath the site title (centred) and the site title be centred across the top... is there a way of doing this with CSS?

Thank you so much!

Ahh - Sorry, just noticed this CSS code you have kindly supplied throws the position social Icons and menu out on the DESKTOP version! See attached

It would be great if I could scale the logo whilst maintaining the integrity of the social icons and menu positions as seen in the 'before' still...

Thanks so much!

With mobile layout, use this

@media screen and (max-width:767px) {
/* Logo size */
.header-title-logo img, .header-title-logo a {
    max-height: 400px !important;
}
}