Jump to content

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

Go to solution Solved by darob78,

Recommended Posts

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

Mobile Info Bar active item color.jpg

Custom CSS mobile info bar background color.png

Link to comment

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! 

Please like and upvote if my comments were useful to you. Thanks!

Zygmunt Spray
Squarespace Website Designer
Contact me: https://squarefortytwo.com/ 
🔌Ghost Squarespace Plugins (Referral link)
Buy me a coffee

Link to comment

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!

Link to comment
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?

image.png.d53ae118345c670aba1a36e40d2e36fc.png

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
10 hours ago, tuanphan said:

You want to change

  • Blue background around email/call icon?

image.png.d53ae118345c670aba1a36e40d2e36fc.png

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

Link to comment

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. 

Link to comment
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);
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
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.

trigger color.jpg

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.