How To Customize Mobile Info Bar Colors

This tutorial was recorded in Squarespace 7.1 but also applies to legacy sites built on version 7. For more information, visit insidethesquare.co/themes

Squarespace has a cool feature called the “mobile info bar” which shows your business info in a banner at the bottom of your site when viewing it on a mobile device.

The colors can be customized with CSS, and that’s exactly what you’ll learn how to do in this video!

If you’re new to this feature, click here to watch the setup tutorial.

---

All the codes from this tutorial are below, BUT there are a few things you need to know:

→ There is more than one way to do this! Code is super customizable, and this is my technique.

→ Make sure you select the light or dark option to have enough contrast for your text and icons. The light mobile info bar has dark text and icons, while the dark version has light text and icons.

→ This code will overwrite the background color for both light and dark options.

---

Here are the codes from this tutorial:

This code will change the color of the text:

.sqs-mobile-info-bar{background: red!important}

This code will change the color of the text:

.sqs-mobile-info-bar-trigger-label {color: yellow!important}