Mobile Information Bar

Description

The mobile information bar shows your business information in a banner at the bottom of your site when viewing it on mobile. This gives your visitors a quick way to contact you on the go!

You can choose to display any of the following information in your mobile bar:

  • Email - opens as an email address to your email

  • Phone - starts a call to your number

  • Map - opens a map with your location

  • Hours - displays your business hours and shows if you are currently open or closed

Custom CSS

For style changes across multiple pages, add the code snippet to your Custom CSS panel and each page will be updated.

Advanced Code Injection

For style changes on one page, add the code snippet to the page Advanced Code Injection so only that page will be updated. Enclose your code in style brackets like this:

<style>

.sqs-mobile-info-bar-triggers {
}

</style>
 

Custom CSS

General

To target the mobile info bar background

/* mobile info bar background */
.sqs-mobile-info-bar-triggers {
}

To target all mobile info bar icons

/* all mobile info bar icons */
.sqs-mobile-info-bar-trigger-icon {
}

To target all mobile info bar text labels

/* all mobile info bar text labels */
.sqs-mobile-info-bar-trigger-label {
}
 

Email

To target the email icon

/* email icon */
.sqs-mobile-info-bar-trigger[data-type="contactEmail"] .sqs-mobile-info-bar-trigger-icon {
}

To target the email text

/* email text */
.sqs-mobile-info-bar-trigger[data-type="contactEmail"] .sqs-mobile-info-bar-trigger-label {
}
 

Phone

To target the phone icon

/* phone icon */
.sqs-mobile-info-bar-trigger[data-type="contactPhoneNu mber"] .sqs-mobile-info-bar-trigger-icon {
}

To target the phone text

/* phone text */
.sqs-mobile-info-bar-trigger[data-type="contactPhoneNu mber"] .sqs-mobile-info-bar-trigger-label {
}
 

Map

To target the map icon

/* map icon */
.sqs-mobile-info-bar-trigger[data-type="location"] .sqs-mobile-info-bar-trigger-icon {
}

To target the map text

/* map text */
.sqs-mobile-info-bar-trigger[data-type="location"] .sqs-mobile-info-bar-trigger-label {
}

To target the open map: business name

/* open map: business name */
.sqs-mobile-info-bar-overlay-content .sqs-mobile-info-baraddress [data-type="addressTitle"] {
}

To target the open map: business address

/* open map: business address */
.sqs-mobile-info-bar-overlay-content .sqs-mobile-info-baraddress {
}

To target the open map: map close icon

/* open map: map close icon */
.sqs-mobile-info-bar-overlay-close {
}
 

Hours

To target the hours icon

/* hours icon */
.sqs-mobile-info-bar-trigger[data-type="businessHours"] .sqs-mobile-info-bar-trigger-icon {
}

To target the hours text

/* hours text */
.sqs-mobile-info-bar-trigger[data-type="businessHours"] .sqs-mobile-info-bar-trigger-label {
}

To target the hours menu: background

/* hours menu: background */
.sqs-mobile-info-bar-overlay {
}

To target the hours menu: days of the week text

/* hours menu: days of the week text */
.sqs-business-hours-day-label {
}

To target the hours menu: closed text

/* hours menu: closed text */
.sqs-business-hours-day .closed {
}

To target the hours menu: hours text

/* hours menu: hours text */
.sqs-business-hours-day {
}

To target the hours menu: “We are currently” title text

/* hours menu: “We are currently” title text */
.sqs-business-hours-store {
}

To target the hours menu: “Open/Closed” title text

/* hours menu: “Open/Closed” title text */
.sqs-business-hours-store span {
}
7.0, 7.1Cristina TiosecoMobile