Text in header adapt to site background

[RunawaySTD]

Hey! I would like to adapt the colour of my text  in the Header to the background of the site like in this page: https://representclo.com

Has anyone a idea how to do this?

Thanks.

[PageFly-Amelia]

This is Amelia from PageFly - Landing Page Builder App

You can try with some steps below to make the dynamic color change on your header

1. Edit Your Theme Files:
- Go to your Shopify admin panel.
- Navigate to Online Store > Themes > Actions >  Edit code .

2. Modify Your Header Code:
- Open the file for your header section, which is typically located under  Sections > `header.liquid` or `header.liquid.json`.
- Find the HTML elements containing your header text (e.g., the site logo or navigation links).

3. Add a Class for Dynamic Text Color:
- Add a class to the header element that will be used for the dynamic color change. For example:

<header class="site-header dynamic-color">
<!-- Your header content -->
</header>

4. Set Up CSS for Text Color Change:
- Add CSS rules to define the different states of the text color. Open your theme’s CSS file (often `theme.css` or `styles.css` in the **Assets** folder).
- Define the color change based on a specific class or data attribute:

/* Default header text color */
.site-header .dynamic-color {
color: #ffffff; /* Default white */
}

/* Change header text color to dark when on a light background */
.site-header.dark-text {
color: #000000; /* Black text for light backgrounds */
}

5. Add JavaScript to Detect Background Change:
- Create a JavaScript file or add to your existing one in the **Assets** folder (e.g., `custom.js`).
- Use JavaScript to detect the background color of each section as you scroll and apply the corresponding class to the header.

Here's an example of a basic JavaScript implementation:

document.addEventListener("DOMContentLoaded", function () {
// Get the header element
const header = document.querySelector(".site-header");

// Get all sections that affect the header color
const sections = document.querySelectorAll(".color-change-section");

window.addEventListener("scroll", () => {
sections.forEach((section) => {
const rect = section.getBoundingClientRect();

// Check if the section is in the viewport
if (rect.top <= 0 && rect.bottom >= 0) {
// Check if the section has a light background
if (section.classList.contains("light-bg")) {
header.classList.add("dark-text"); // Add class for dark text
} else {
header.classList.remove("dark-text"); // Default light text
}
}
});
});
});

- In the above code:
- The script listens for the scroll event and checks which section is currently in view.
- It then changes the header text color based on the class (`light-bg`) of the section.

6. Set Up Your Sections with Background Classes:
- Add classes to your sections in your theme files to indicate whether they have a light or dark background. For example:

<section class="color-change-section light-bg">
<!-- Content for light background section -->
</section>

<section class="color-change-section dark-bg">
<!-- Content for dark background section -->
</section>

7. Test and Adjust:
- Preview your store and scroll through the different sections to see if the header text color changes correctly based on the section background.
- Adjust the JavaScript and CSS code as necessary to refine the behavior, ensuring it works across different devices and viewports.

Tips

- Use Data Attributes: Instead of classes like `light-bg` or `dark-bg`, you can use data attributes (e.g., `data-color="dark"`) to make your JavaScript logic more flexible.
- Intersection Observer API: For a more performant solution, you can use the `IntersectionObserver` API to detect which section is currently in view and change the header text color accordingly.
- Smooth Transitions: Add CSS transitions to your header text color for a smoother effect:

.site-header .dynamic-color {
transition: color 0.3s ease-in-out;
}

Hope that my solution works for you.

Best regards,

Amelia | PageFly