Change Site Title Color on Mobile Only

Site URL: https://www.brandingofficehours.com

I'm in SQSP 7.1. My site isn't able to view live right now (I have some MX records messed up; it's not just pw protected), so I can't send you there for reference.

But, attaching a couple of images. The deal is: The site title appears white on some pages, and it's overlaying a background image that's black. But, because I need the user to see the text next to the images to the left, I have to position the focal point to over the light beige area instead. In doing so, it means that the site title is white over beige (unreadable) when on mobile.

It only happens on some pages, so I'd love to be able to:

• Change the site title color while user is on mobile
• AND, only have that happen on specific pages (not site-wide).

Is this possible with page-specific coding?

What is access password?

Hi

Use this code in Design -> Custom CSS It works only for this page.

@media screen and (max-width:640px){
    #collection-5f3fd0df46b52a672c2e6bd2 .header-announcement-bar-wrapper .header-title-text a {
    color: black !important;
}
}

Please use the like button if it helps you!

Best,
Leopold

@tuanphan Site pw is "branding".

@IXStudio Amazing! That seems to work on some pages:

• Home
• Blog
• And, basically any other page where the title was already black over a beige background.

But not others:

• Contact
• About
• Consulting
• Data Deletion Request

I thought it might have something to do with the Section Theme colors applied at the top of each of those pages, but—for instance—Home and About both have "White Minimal" section color themes applied and yet, somehow, the site title appears black on mobile on Home and white on mobile on About.

Edit: Also—now my mobile nav site title is Black over the #3b3b3b background and it needs to be white, as well. Any help is appreciated!

Hi,
In my code you see this 

#collection-5f3fd0df46b52a672c2e6bd2

This is the ID of your body. Just need to replace it or add another pages like that completed CSS code to use it for other pages.

Please use the like button if it helps you!

Best,
Leopold

My sincere apologies, @IXStudio! I somehow missed that you'd said it only applied to a single page. I've made the fix for all pages now!

The only thing I could use some final help with is the site title on mobile nav. It has the opposite issue—I always need it to appear white on mobile when the nav is clicked, because it's currently black on black. Any insight there?

I tried to piece together some separate custom css I already have to create this:

/* Change dropdown menu site title color */
@media screen and (max-width:640px){
.header-title-text a {
    color: #fff !important;
  }
}

And that's not working for me.

Hi

Remove the old code and replace with this.

@media screen and (max-width:640px){
#collection-5f3fd0df46b52a672c2e6bd2:not(.header--menu-open) .header-announcement-bar-wrapper .header-title-text a {
    color: #3b3b3b !important;
}
}

Please use the like button if it helps you!

Best,
Leopold

@IXStudio Boom! That was it! Thank you!!!