How to Change Your Mobile Logo in Squarespace (Brine)

The Brine Family are hands-down the best Squarespace templates out there. They have so many customizable features, and make the web design process fun and less of a tech-nightmare.

And on top of that, they have so many different mobile styles that you can edit, and it’s so easy to edit them, which is super important since SO many people are viewing your site on their mobile phones these days.

But sometime’s you come across something that isn’t easily changeable in Brine (it’s rare, and shocking). And sometime’s you come across a feature that looks good on web, but not mobile (and visa versa).

This happened to me recently when I was doing a bit of a site design refresh. Everything had been looking good on desktop, but one quick look at my mobile site and I quickly realized I had been totally neglecting it.

My biggest problem, as you’ve probably guessed by now, was that I had to have the same logo on my mobile as I had on my desktop.

 
How to Change Your Mobile Logo in the Brine Template Squarespace - Big Cat Creative
 

Now I’m all for brand and logo continuity, but the logo I had on my desktop just looked so crappy on my mobile site.

My desktop logo is big and round, which is absolutely fine for desktop. As soon as it got to mobile, it was either too big or too small.

It looked more balanced out being smaller, but it wasn’t readable. If I wanted it to be readable, I had to make it bigger, which made the nav 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.

 

I liked the height of the menu here, but the logo is so tiny that you can’t really tell what it is, you definitely can’t read it!

How to Change Your Logo on Mobile in Squarespace (Brine Template) - Big Cat Creative

The logo is clearer and more readable here, but the height of the menu is too large and takes up too much screen space.

How-to-Change-Your-Mobile-Logo-in-Squarespace.jpg
 

There isn’t any simple way to add a different logo for your mobile site on the Brine template, but I was determined to figure it out because I wasn’t happy with either of the above options.

So, I figured it out!

There is some coding involved, and there will definitely be some adjusting that will depend on your site settings and size of your logo. You can copy and paste most of it, but there are some variables so it’s not 100% copy and paste.

Let’s get started!

1. Design Your Mobile Logo

If you don’t already happen to have something that will work for your mobile logo, then get designing! I just went with a really simple text logo in my brand colors that I thought would fit well.

2. Upload Your Logo

Now we’re going to upload the mobile logo to your Squarespace site. If you don’t know what I’m 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’. Then in that pop up box, navigate to “Files”. Boom, you found it! Upload your logo here.

If you’re totally like, “WTF is she talking about”, check out this blog post for more in-depth instructions on how to upload your logo (or anything else). There’s even pictures!

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


The parts in BOLD are the parts that you’ll want to change. Add in your custom URL and you can adjust the max height and min height to whatever works for your logo.

I 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:

Mobile View in Squarespace.png

The click on the mobile icon:

Mobile View in Squarespace 2.png
 

5. Check it on Mobile

Yay, you did it! I would recommend checking it on your mobile device too, to make sure it looks good!


Awesome job! Make sure to DM me on Instagram and let me know how you go, I’d love to check it out! Here’s my finished product:

 
How-to-Change-Your-Mobile-Logo-in-Squarespace-3.jpg
 
 

more web design tips