How to customize mobile info bar colors

How To Customize Mobile Info Bar Colors

In the ever-evolving landscape of website design, customization has become a crucial aspect of creating a unique and engaging user experience. Squarespace, known for its user-friendly interface, allows you to tailor various elements of your site, including the mobile information bar. This blog post will guide you through the process of customizing the colors of the mobile information bar on Squarespace using simple CSS codes. Let’s begin the process of How To Customize Mobile Info Bar Colors.

Understanding the Basics-How To Customize Mobile Info Bar Colors

Before diving into customization, it’s essential to understand the two key components we’ll be working with:

  • The background color of the mobile information bar
  • The color of the trigger label.

Light and Dark Options

Squarespace 7.1 offers a thoughtful approach to mobile design by providing users with a choice between light and dark versions of the mobile info bar. The decision between these options can significantly impact the visibility and accessibility of text and icons within the mobile menu.

  • Light Option: The light mobile info bar features dark text and icons. This creates a high-contrast environment, making it easier for users to read and interact with the content. Choose the light option when you want your text and icons to stand out prominently against a brighter background. How To Customize Mobile Info Bar Colors
  • Dark Option: Conversely, the dark mobile info bar adopts a design with light text and icons. This is ideal for scenarios where you prefer a subtle and elegant contrast against a darker background. The dark option can contribute to a cohesive and aesthetically pleasing design. How To Customize Mobile Info Bar Colors

Step-by-Step Customization:

  1. Log in to your Squarespace account and navigate to the “Website Tools” tab.
  2. Click on “Custom CSS” to access the custom code editor. How To Customize Mobile Info Bar Colors
  3. Copy and paste the respective codes for background and trigger label color customization. How To Customize Mobile Info Bar Colors         To change the background color of the mobile information bar, use the following code:
    .sqs-mobile-info-bar {
        background: red!important;

    If you wish to alter the color of the trigger label text, employ the following code:

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

    Feel free to experiment with different colors to find the perfect combination that aligns with your website’s aesthetic.

  4. Save the changes, and your mobile information bar will now reflect the chosen colors. How To Customize Mobile Info Bar Colors

You may also like:

How To Add a Mobile Information Bar in Squarespace

How to change page section background color in Squarespace

Make an Email Link Clickable Squarespace

Best Practices:

While customization offers a myriad of possibilities, it’s essential to maintain a harmonious design. Here are some best practices to consider:

  • Color Harmony: Ensure that the selected colors complement your overall website theme and don’t clash with other elements.
  • Contrast: Aim for a good contrast between the background color and the trigger label text to enhance readability.
  • Responsive Design: Test your customized mobile information bar on various devices to ensure a seamless and visually appealing experience for all users.


Customizing the mobile information bar on Squarespace adds a personal touch to your website and can significantly impact the overall user experience. The provided CSS codes offer a simple yet effective way to infuse vibrant colors into this often-overlooked element. Embrace the creative process, experiment with different color combinations, and watch your Squarespace site come to life with a personalized touch.

FAQs-How To Customize Mobile Info Bar Colors

What is a mobile info bar?

The mobile information bar displays your business information in a banner at the bottom of your site when viewing it on a mobile device, giving visitors quick access to your contact information on the go. It appears when you’re at the top of a page and disappears as you scroll down.

Can you edit the mobile view on Squarespace?

In device view, click Edit in the top-left corner to edit your site content and organize sections within the mobile preview.

Can I change my layout on Squarespace?

With over 90 Squarespace templates to choose from, it can be not easy to decide what template to choose when you first sign up. The great thing about Squarespace is that all templates are included when you sign up for a plan so you can switch them around any time with 30 seconds and a few clicks of a button.