Increase logo size on Squarespace
I got this coding question the other day:
“On Squarespace 7.1, how do you add an image to the menu OR make the logo bigger than the allotted 320 px? Plus I want it to be mobile friendly.”
Don’t worry friend, I’ve got you!
There are a few ways to do this.
- Set the menu navigation transparent and then set a background photo for the section below.
- Edit the site header, click “site title & logo”, add the logo and make it as big as you can (320 px). Then go to Design > Custom CSS > add this code:
.header-layout-branding-center-nav-center .header-title-nav-wrapper {flex-basis:100%!important; align:center!important; height:33vw; margin-top:-2vw; padding-bottom:2vw}
.header-title-logo img {
width: auto;
max-width: 100%;
max-height: 800px;
}
SEE THIS IN ACTION ON THIS WEBSITE!
Want more Squarespace blogs? > Squarespace Blogs
Interested in a different type of blog post? SELECT BELOW!
Read other blogs about: Squarespace
Hey, I'm Bekah! Web designer, Squarespace Circle Gold Partner, marathon runner, and mama of two. I built Rebekah Read Creative in 2018 after leaving corporate America, and I've spent the years since helping purpose-driven entrepreneurs stop cringing at their websites and start getting found on Google.
I'm the kind of person who overshares, processes out loud, and goes all in on whatever has my heart, whether that's running a 50k or building someone's website in a single day. Quality coffee and real conversations are basically my love language.
If you're here, you're probably tired of the Instagram hustle and ready for a website that actually works for you. You're in the right place.
