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;
}
}

Hello , 

my url is www.posh-bridal.com and I would like to make my logo bigger but keep a very thin header 🙂 what should I add both for desktop and mobile ? 

Many millions of thanks 

Hello !! 

I would like to resize my logo on my header this is my url www.posh-bridal.com on both mobile and desktop without making my header bigger

33 minutes ago, riribaragiola said:

I would like to resize my logo without making my header bigger

The first step will be to upload an image file that doesn't contain empty space above and below the logo itself. As you can see below, the current image file contains lots of space above and below, so when you increase the size, the header must expand to accommodate this 'space'.

Hello ! thank your your answer, it is done but it makes no changes

36 minutes ago, riribaragiola said:

it is done but it makes no changes

Once you've removed the excess space from the image, you should be able to adjust the logo size by using the slider in the header settings:

You may be able to meet your needs with this alone. Note that there are separate sliders for the logo height on desktop and mobile.

However, once you reach a certain logo height, the header will start to expand so that the logo is not larger than its container.

If you want to shrink the height of the header further, so there is almost no whitespace, you could add some Custom CSS to set a maximum height. For example, for the desktop, you might use:

.header-title-nav-wrapper {
  max-height: 30px;
}

Did this help? Please give feedback by clicking an icon below  ⬇️

many many many thanks ! 

Paul could you help me with another problem ? I want to add another button underneath the "add to cart" button in the same shape same color but with written on it "Book a stylist advice" can you help me please ?