Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Seeking CSS to set color of site title text when scrolled down the page and mobile menu is showing.


Question

Site URL: https://sswebdev-one.squarespace.com/

Site URL: https://sswebdev-one.squarespace.com/

The password for our site is: secret

Here are the steps to reproduce the issue I'm trying to solve:

1) Go to the "Contact Us" page at: https://sswebdev-one.squarespace.com/contact-us
2) Adjust the width of your browser so that it's narrow enough to have the mobile hamburger menu display.
3) Scroll down the page so that the black background appears in the header area.
4) Click on the mobile hamburger menu.
Actual Result: The website header text "Test Site" appears in white and it's not visible.
Desired Result: I would like the "Test Site" text to appear orange.

I defined this CSS (for the "Initiatives" and "Contact Us" pages):

#collection-5d375e74792ad1000134157d, #collection-5d3773b4c6dce00001b488b3 {
    .tweak-fixed-header .shrink.header .header-title-logo a:after  {
        color: orange!important;
    }
}
but I think this CSS (below) is overriding the CSS for the "Initiatives" and "Contact Us" pages:

/* Set font color of site title text to white on scroll */
.tweak-fixed-header .shrink.header .header-title-logo a:after {
  color: white !important;

Thanks in advance for any suggestions you have.
 

Link to comment
  • Answers 2
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

2 answers to this question

Recommended Posts

  • 0
10 hours ago, wonderwebber said:

Site URL: https://sswebdev-one.squarespace.com/

Site URL: https://sswebdev-one.squarespace.com/

The password for our site is: secret

Here are the steps to reproduce the issue I'm trying to solve:

1) Go to the "Contact Us" page at: https://sswebdev-one.squarespace.com/contact-us
2) Adjust the width of your browser so that it's narrow enough to have the mobile hamburger menu display.
3) Scroll down the page so that the black background appears in the header area.
4) Click on the mobile hamburger menu.
Actual Result: The website header text "Test Site" appears in white and it's not visible.
Desired Result: I would like the "Test Site" text to appear orange.

I defined this CSS (for the "Initiatives" and "Contact Us" pages):

#collection-5d375e74792ad1000134157d, #collection-5d3773b4c6dce00001b488b3 {
    .tweak-fixed-header .shrink.header .header-title-logo a:after  {
        color: orange!important;
    }
}
but I think this CSS (below) is overriding the CSS for the "Initiatives" and "Contact Us" pages:

/* Set font color of site title text to white on scroll */
.tweak-fixed-header .shrink.header .header-title-logo a:after {
  color: white !important;

Thanks in advance for any suggestions you have.
 

Hi. IT looks like you solved by changing site title to logo image? DO you still need help?

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 0

Thanks for checking in. I don't thinkn I changed the site title to the logo image, but I am leaning toward adding the black header section to the "Contact" page and then updating the style of the "Contact" page to match the other pages as it's just too hard to manage 2 different styles.

Bottom Line - I'm all set with this query. No need to follow up. Thanks so much for checking in.

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...