# Change Logo Color on Scroll

**URL:** <https://community.elfsight.com/t/change-logo-color-on-scroll/62532>\
**Category:** Platform Tips\
**Tags:** squarespace\
**Created:** [July 23, 2024, 8:23am UTC](https://community.elfsight.com/t/change-logo-color-on-scroll/62532 "2024-07-23T08:23:05Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![tuanphan](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/tuanphan/32/3165_2.png) [@tuanphan](https://community.elfsight.com/u/tuanphan)\
**Post date:** [July 23, 2024, 8:23am UTC](https://community.elfsight.com/t/change-logo-color-on-scroll/62532/1 "2024-07-23T08:23:05Z")

</div>

To change Logo Color on Scroll in Squarespace, you can follow these  
Note: CSS code can only invert the logo into white or black, and cannot change the color, so here we will use the code to change the logo into another logo, so you can design a new logo and add it to the code.

**#1.** First, you need to upload another logo and find its url. Follow #1 in [this guide](https://community.elfsight.com/t/adding-second-image-underneath-logo-on-mobile-version/59823) to find url  
In my example, we will have url:

```auto
https://images.squarespace-cdn.com/content/v1/6672ecf757a5d945cabc3965/1d45ed6f-3a9a-4523-9320-1633c8d98b90/st-peters-church-3536449_1280.jpg?format=500w

```

**#2.** Use this code to **Custom CSS box**

```auto
header#header.shrink img {
  content: url(https://images.squarespace-cdn.com/content/v1/6672ecf757a5d945cabc3965/1d45ed6f-3a9a-4523-9320-1633c8d98b90/st-peters-church-3536449_1280.jpg?format=500w);
}

```

 ![image](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/5/7/579aa9ae7e23a87c16a52eb043858661645274c9.png)