Make Squarespace’s Mobile Info Bar Match The Announcement Bar
Squarespace’s Mobile Information Bar is a genuinely useful little feature, especially for local businesses. It puts quick actions like email, phone, location, and hours right at the bottom of the screen for mobile visitors. The only problem is… Squarespace doesn’t let you style it.
By default, you’re stuck choosing between a light version and a dark version. If neither one fits your brand, the bar ends up looking like it belongs to a totally different website.
So here’s the fix: we’re going to make the Mobile Info Bar automatically match the color of your Announcement Bar using a simple bit of custom CSS.
Why Your Mobile Info Bar Looks Off
Squarespace gives you two style choices for the Mobile Information Bar: Light or Dark. That’s fine if your brand color palette is “default Squarespace gray,” but if you’re using an actual brand color for your Announcement Bar, the Mobile Info Bar can feel like this random strip that doesn’t belong.
And since the Mobile Info Bar sits in prime real estate (bottom of the screen), the mismatch is hard to ignore. If it’s going to be there, it should look intentional.
What the Mobile Info Bar Does
The Mobile Information Bar is built for quick taps. You can show an email address, phone number, location, and/or business hours, and those details pull from your site’s Business Information.
You turn it on in either Light or Dark mode in the Mobile Information Bar panel.
So the utility is there. The styling freedom is not.
Where Announcement Bar Colors Live
Squarespace does let you control the Announcement Bar’s background and text colors through Site Styles, and it’s pretty straightforward:
Quick steps
Open Site Styles
Go to Announcement Bar style tweaks
Adjust Background and Text colors
Save
That matters because we’re about to “borrow” that Announcement Bar background color and apply it to the Mobile Info Bar automatically.
Sync the Mobile Bar to the Announcement Bar
Squarespace has the Announcement Bar background color as a CSS variable:
var(--announcement-bar-background-color)
So all we do is set the Mobile Info Bar background to that value.
Step-by-step
Make sure your Announcement Bar color is set in Site Styles.
Make sure your Mobile Info Bar is enabled (Light or Dark).
Paste this into Design → Custom CSS (Squarespace’s CSS Editor).
Code: Match Mobile Info Bar to Announcement Bar Background
/* Match Mobile Info Bar Colors to Announcement Bar Background */
.sqs-mobile-info-bar {
background: var(--announcement-bar-background-color) !important;
}
.sqs-mobile-info-bar-overlay,
.sqs-mobile-info-bar-overlay-close {
background: var(--announcement-bar-background-color) !important;
}
Once that’s in, preview mobile and you’ll see the Mobile Info Bar background snap into alignment with the Announcement Bar.
Swap Colors Using Squarespace Variables
Maybe you don’t want the Mobile Info Bar to match the Announcement Bar. That’s fair. You could use any color variable.
A common alternative is matching it to your Primary Button color instead, so the mobile bar feels more like a persistent “brand CTA strip.” For that, you can use:
var(--primaryButtonBackgroundColor)
Code: Match Mobile Info Bar to Primary Button Background
/* Match Mobile Info Bar Colors to Primary Button Background */
.sqs-mobile-info-bar {
background: var(--primaryButtonBackgroundColor) !important;
}
.sqs-mobile-info-bar-overlay,
.sqs-mobile-info-bar-overlay-close {
background: var(--primaryButtonBackgroundColor) !important;
}
Avoid Adaptive Header Contrast Problems
This is the part some people skip, and then they wonder why the site suddenly looks broken on certain pages.
If your header (and/or announcement bar behavior) is tied into an Adaptive setup that changes depending on the first section’s theme, you can run into legibility issues when your Announcement Bar background shifts between light and dark contexts.
If you’re using code that pulls your Announcement Bar background color, and your Announcement Bar background changes across different themes/sections, your Mobile Info Bar background will also change. But your Mobile Info Bar text/icons are still locked into Light or Dark mode.
So you can end up with light icons on a light background or dark icons on a dark background, which is… not ideal.
My recommendation if you’re using Adaptive mode for your header: keep your announcement bar colors consistent enough across all color themes that you can confidently choose one Mobile Info Bar mode (Light or Dark) and it stays readable.
Best Practices
Pick the right Light/Dark mode first
Squarespace lets you flip the Mobile Info Bar between Light and Dark. Choose whichever gives you better contrast with your final background color.
If your announcement bar color is rich/dark (like orange, navy, deep green), Dark mode usually looks best, ‘cause it gives you light text + icons. If it’s pale (like light gray, beige, pastel), Light mode usually wins.
Don’t try to recolor icons separately
Those little icons in the Mobile Info Bar are PNG assets, so you can’t restyle them with CSS, and text one color, icons another color tends to look weird. In my opinion, the clean move is: keep icons/text consistent, and just tweak the background.
Happy designing!
