Change tapped item color in Mobile Information Bar in v.7.0

Site URL: https://robertsonphoto.com

Hi, I've already changed the tray color of the Mobile Information Bar to white to suit my website, thanks to a link I found to a post by tuanphan (ty!) Now I'd like to change the color of the box that appears when you tap an item in the information bar (see attached.) How do you reference this color block (around the email icon in the screenshot?) Squarespace support won't tell me the keyword but suggested I try this forum.

Many thanks

I've had a look, but I can't see where this colour comes from and therefore how to change it. Maybe someone else can help? Luckily you only see it for half a second before you go to your email or phone app, if that's any consolation! 

Users are leaving the site at that point so I agree it's not a big deal, but if it's possible to change it to suit I'd like to. Thanks for looking Ziggy

After some more research and with trial and error I've gotten closer:

.sqs-mobile-info-bar-trigger {
  	background-color: silver !important;
}

This changes the color of the boxes under the icons, but it's fulltime; I just need to constrain it to active only, whatever the correct nomenclature is. I don't know why squarespace is so secretive about this.

Any ideas from the experts appreciated. Thanks!

On 10/6/2022 at 5:48 AM, darob78 said:

After some more research and with trial and error I've gotten closer:

.sqs-mobile-info-bar-trigger {
  	background-color: silver !important;
}

This changes the color of the boxes under the icons, but it's fulltime; I just need to constrain it to active only, whatever the correct nomenclature is. I don't know why squarespace is so secretive about this.

Any ideas from the experts appreciated. Thanks!

You want to change

• Blue background around email/call icon?

10 hours ago, tuanphan said:

You want to change

• Blue background around email/call icon?

That's right, probably to the shade of grey used in my site navigation already. I haven't had any luck finding out how to access the blue background that occurs when you tap the email and call icons. Do you have any idea?

Many thanks

ok I've just shifted my main site color to a blue from turquoise so the mobile navigation color no longer looks like a mistake-- a solution even if not the one I was looking for lol.

If anyone knows how to target the mobile info bar navigation color I'm still interested in your ideas. Many thanks. 

On 10/12/2022 at 6:58 AM, darob78 said:

ok I've just shifted my main site color to a blue from turquoise so the mobile navigation color no longer looks like a mistake-- a solution even if not the one I was looking for lol.

If anyone knows how to target the mobile info bar navigation color I'm still interested in your ideas. Many thanks. 

Try adding this to Design > Custom CSS

.sqs-mobile-info-bar-trigger {
    background-color: #f1f !important;
}
.sqs-mobile-info-bar-trigger * {
    color: white !important;
}
span.sqs-mobile-info-bar-trigger-icon {
    filter: invert(1);
}

On 10/15/2022 at 1:59 AM, tuanphan said:

Try adding this to Design > Custom CSS

.sqs-mobile-info-bar-trigger {
    background-color: #f1f !important;
}
.sqs-mobile-info-bar-trigger * {
    color: white !important;
}
span.sqs-mobile-info-bar-trigger-icon {
    filter: invert(1);
}

 

Hi tuanphan, thanks for investigating, however with these additions the trigger area is now purple. The navigation color is still blue on top of this.