# Change Homepage nav links color on scroll past first section

**URL:** <https://community.elfsight.com/t/change-homepage-nav-links-color-on-scroll-past-first-section/98423>\
**Category:** Platform Tips\
**Tags:** squarespace\
**Created:** [February 3, 2025, 9:00am UTC](https://community.elfsight.com/t/change-homepage-nav-links-color-on-scroll-past-first-section/98423 "2025-02-03T09:00:14Z")\
**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:** [February 3, 2025, 9:00am UTC](https://community.elfsight.com/t/change-homepage-nav-links-color-on-scroll-past-first-section/98423/1 "2025-02-03T09:00:14Z")

</div>

**#1.** First, find Section ID. Here we will **[find SECOND SECTION ID](https://community.elfsight.com/t/how-to-find-id-in-squarespace/65340)**.

In my example, we will have: section[data-section-id=“67472f49ffa1ba4b6e64aab5”]

 ![image](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/3/1/313e25325d37ed4693727e98edfc8968a1f7bfe7.jpeg)

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

```auto
body.scroll-past div.header-nav-item>a {
  color: #f1f !important;
}

```

 ![image](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/7/6/76989e182efc2b8b06df116162cd2b7636552b07.jpeg)

**#3.** Use this code to Code Injection \> Footer.

```auto
<script>
document.addEventListener('DOMContentLoaded', () => {
  const init = () => {
    const secondSection = document.querySelector('[data-section-id="67472f49ffa1ba4b6e64aab5"]');
    const body = document.body;
    const header = document.querySelector('header');
    
    if (!secondSection || !body || !header) {
      console.log('Required elements not found, retrying...');
      setTimeout(init, 100); // Retry after 100ms
      return;
    }
    const observer = new IntersectionObserver((entries) => {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          body.classList.add('scroll-past');
        } else {
          body.classList.remove('scroll-past');
        }
      });
    }, {
      threshold: 0,
      rootMargin: '-10% 0px 0px 0px' // Trigger slightly before element enters viewport
    });
    observer.observe(secondSection);
    console.log('Scroll handler initialized');
  };
  // Start initialization
  init();
});
</script>

```

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

Remember to change ID in the code.

 ![image](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/0/d/0d191a81c1eac27d518fcfe3b1d43caa77771e84.png)

**#4.** Result

Nav links color will change when users scroll over past first section on homepage

![image](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/c/4/c4b05ae1682efe530e04ca0219c392f9e7963ffe.png)