Text in header adapt to site background

[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:

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:

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