Jump to content

Switch Logo on Scroll

Recommended Posts

6 minutes ago, alexwhittlee said:

Can someone help me so that my logo switches from our light logo to our darker one on scroll? 

Can you share your website URL?

If my comments are useful, please like and mark my solution as answer. It will encourage me. Thanks

MD Rofik
Website Designer and Digital Marketer

Am I helpful? Want to offer me a coffee?
Send me a message if needed any help. I'll try to reply as soon as possible.


 

Link to comment
7 minutes ago, alexwhittlee said:

It's not public yet but I am happy to give you access if you can help! 

You can make the website password protected and share the website with the password. Instructions below

https://support.squarespace.com/hc/en-us/articles/205815528-Site-wide-passwords#toc-set-a-site-wide-password

If my comments are useful, please like and mark my solution as answer. It will encourage me. Thanks

MD Rofik
Website Designer and Digital Marketer

Am I helpful? Want to offer me a coffee?
Send me a message if needed any help. I'll try to reply as soon as possible.


 

Link to comment
1 hour ago, alexwhittlee said:

Can you upload the dark logo and send me the logo URL?

If my comments are useful, please like and mark my solution as answer. It will encourage me. Thanks

MD Rofik
Website Designer and Digital Marketer

Am I helpful? Want to offer me a coffee?
Send me a message if needed any help. I'll try to reply as soon as possible.


 

Link to comment

The dark logo is the one that is there now. This is the primary logo though so I think I'm thinking I should just switch the color of the text now. Is there a way for me to keep the text and button white before scrolling and then switch it to brown once I start to scroll and the header background turns to white? 

Link to comment
Just now, alexwhittlee said:

The dark logo is the one that is there now. This is the primary logo though so I think I'm thinking I should just switch the color of the text now. Is there a way for me to keep the text and button white before scrolling and then switch it to brown once I start to scroll and the header background turns to white? 

Add these code on Custom CSS panel in Website Utilities Website Tools > Custom CSS. Let me know if it work

.header-nav-folder-item * {
    color: #000;
}
.sqs-button-element--primary:hover {
    color: #000 !important;
}
.header-nav-folder-item:hover *, .header-nav-folder-item--active * {
    color: #be8a60;
}
.theme-col--primary.shrink {
    .header-nav-item a{
        color: #000 !important;
    }
    .header-nav-item:hover > a, .header-nav-item.header-nav-item--active a {
        color: #be8a60 !important;
    }
    .sqs-button-element--primary {
        border-color: #000 !important;
        color: #000 !important;
    }
    .sqs-button-element--primary:hover {
        background: #000 !important;
        color: #fff !important;
    }
}

 

If my comments are useful, please like and mark my solution as answer. It will encourage me. Thanks

MD Rofik
Website Designer and Digital Marketer

Am I helpful? Want to offer me a coffee?
Send me a message if needed any help. I'll try to reply as soon as possible.


 

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.