Jump to content

White font in transparent header, yet black in fixed header?

Recommended Posts

Hi everybody :-) And Merry Christmas!

I am making a webpage. The frontpage (home) is a full image with two sections below.

When the visitor enter the page, I wish the font and social media icons in the header on the image to be white, yet when they scroll down I want the header (fixed) has a yellow base and black font.

Does any one know how to do this? Make the font change colour depending on background?

At first it did it by it self, but now I can't figure it out.

I hope someone might be able to help out :-) 

All the best Tyra

Link to comment
  • Replies 10
  • Views 727
  • Created
  • Last Reply
On 12/26/2020 at 4:30 PM, dokkedahl said:

Hi Tuanphan

Thanks for reply. The URL is www.seriouslyfun.agency / code: Marieersød

It just the homepage / frontpage I am thinking about

Best Tyra

Add to Home > Design > custom CSS

/* header color before scroll */
header:not(.shrink) * {
    color: white !important;
    fill: white;
}

 

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
1 hour ago, dokkedahl said:

Sorry - I have one more question...

When I see the frontpage on mobile, så three sidebars are black. Will it be possible to make them white as the Site header and social icons?

Best, tyra

Marieersød

Incorrect password

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
On 1/2/2021 at 8:18 PM, dokkedahl said:

Hi 🙂 First og all, thanks for taking a look at it again! 

I have marked the "sidebar" in the screendump with a red circle 🙂 

Best, tyra 

Skærmbillede 2021-01-02 kl. 14.16.47.png

Add to Custom CSS

/* burger color */
body .burger-inner * {
    background: white !important;
    opacity: 1 !important;
}

 

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Archived

This topic is now archived and is closed to further replies.


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