Jump to content

Site header logo width custom CSS - Squarespace 7.1

Recommended Posts

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

before.png

after.png

Link to comment
  • Replies 7
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

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

before.png

after.png

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

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

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

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

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!

Link to comment

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!

Screenshot 2022-05-09 at 18.41.06.png

before.png

Link to comment

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

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.