How to Change Your Mobile Logo in Squarespace (Squarespace 7.0, 7.1 + Fluid Engine)
With the release of the Fluid Engine editor in 2022, Squarespace has really upped their game when it comes to mobile-specific customizations, making the platform even better for those of us who love to keep it simple and custom-code free!
Among those new mobile features, we've been loving how easily we can add a custom logo for mobile view only! Gone are the days of having to use the same logo for desktop AND mobile with tricky custom code as your only option to fix it (we're looking at you 7.0 👀).
With a significant portion of all site visitors viewing websites on their mobiles, having a logo that is both readable and optimized for a mobile screen is a pretty crucial element to ensure your business is recognizable and at its best in all screen formats.
Follow our two step, easy peasy tutorial to learn how to update your mobile logo on Squarespace 7.1 and Fluid Engine, and if you're still on Squarespace 7.0 (Brine), don't worry we've got a tutorial and a little custom CSS ready for you too!
Let's dive in!
With desktop and mobile screen sizes being so wildly different, it's pretty common that a logo that looks amazing on desktop just isn't quite right for mobile!
Take for example, a website refresh that we did a while back.
Everything had been looking good on desktop, but one quick look at the mobile site and we quickly realized it had been getting totally neglected, with the biggest problem being, as you might have guessed it by now, that the logo we had on desktop just looked terrible on mobile view!
The desktop logo was big and round, which is absolutely fine for desktop, but as soon as we got to mobile, it was either too big or too small.
It looked more balanced out being smaller, but it wasn’t readable. If we wanted it to be readable, we had to make it bigger, which made the navigation menu so big that it ended up basically taking up a quarter of the mobile screen, and when you’re working with a small mobile screen, that’s not ideal at all!
The height of the menu looked good here, but the logo was so tiny that you couldn't really tell what it was, and you definitely couldn't read it!
The logo was clearer and more readable here, but the height of the menu become too large, taking up way too much screen space!
Bottom line, it had to go! So we created a new one.
If you're using Squarespace 7.1 / Fluid Engine:
Note! This setting is available on Squarespace 7.1 and Fluid Engine websites only. Not entirely sure which version of Squarespace you're using? Read this post.
1. Create a mobile logo
If you don’t already happen to have something that will work for your mobile logo, then get designing!
Remember, you don't have much space so a simpler variation of your regular logo that can be easily read even if shrunk down is the way to go!
2. Upload your logo
Go to your website and click Edit in the top left hand corner.
Hover over the top of your website and click Edit Site Header.
👉 If you're loving the look of this example, check out our Verano Squarespace Template 😍
In the pop up menu, select Site title & logo.
Then, scroll down to Mobile Logo Image.
Here, you'll be able to drag and drop your new mobile logo or click the + icon to upload a file or choose one that you've already added to your Asset Library.
To adjust the size of your mobile logo, scroll above to Mobile Logo Max Height.
Click Save and Exit, that's all! 🎉
If you're using Squarespace 7.0 Brine
Note! This code works on Squarespace 7.0 Brine websites only! Not entirely sure which Squarespace version or template you're using? Read this post.
While the Brine template family has so many great customizable features that make it hands-down the best Squarespace 7.0 template family out there, one thing that isn’t easily changeable in Brine is the mobile logo.
To change it, there is some coding involved. While most of it can be copy pasted, note that some variables might need a little adjusting depending on your site settings and logo size!
1. Create a mobile logo
If you don’t already happen to have something that will work for your mobile logo, then get designing!
Remember, you don't have much space so a simpler variation of your regular logo that can be easily read even if shrunk down is the way to go!
2. Upload your logo
Now it's time to upload your mobile logo to your Squarespace site. If you don’t know what we're talking about, basically there’s a sort of “hidden” area in your Squarespace site where you can upload files. It’s not really hidden, it’s just not particularly easy or intuitive to access 😬
The easiest way to get to it is anywhere that you can add a link. So open up one of your existing pages or create a new hidden page and type some text out, then highlight a section of that text and click the ‘add a link button’.
In the pop up box, navigate to “Files”. Boom, you found it! Upload your logo here!
👉 If you’re totally confused, check out this blog post for more in-depth instructions on how to upload your logo or other files!
3. Copy your logo URL
After you’ve uploaded your logo to the above “Files” section, Squarespace will automatically create a URL for the logo. You’ll be able to see the file name of the logo in your Files list, so just copy the exact name and your URL will look something like this:
https://yourdomainnamehere.com/s/yourfilenamehere.png
To check if the URL is correct, you can copy and paste your URL into a new tab in your browser and it will take you top a webpage that is just your logo.
Copy the URL and put it aside because we’re going to use it really soon!
4. Add in the code
Woohoo - almost there!
Head over to Website > Pages > Website Tools > Custom CSS and add the following code:
.Mobile-bar-branding-logo { content: url("https://yourdomainnamehere.com/s/yourfilenamehere.png") !important;
max-height: 22px;
min-height: 22px;
width:auto !important;
}Replace "https://yourdomainnamehere.com/s/yourfilenamehere.png" with your custom URL and adjust the max height and min height to whatever works for your logo.
We recommend looking at the preview in Mobile View while you’re adjusting the max-height and min-height because then you can see exactly what it’s going to look like!
At the very top of your editor, click on this little horizontal line:
The click on the mobile icon:
5. Check it on Mobile
Yay, you did it! We recommend checking your new logo on your actual mobile device too, to make sure everything is looking perfect.
Awesome job! Make sure to DM me on Instagram and let me know how you went, we’d love to check out your updates!
Here’s our updated version:
If you liked this post, Pin it to Pinterest! 👇🏻
