How to set the Header main menu at the top of the page, changes colours

Store Design
,

Topic summary

A user seeks help implementing a sticky header effect in the Craft theme where the header menu transitions from white text with a transparent background to black text with a white background when scrolling.

Proposed Solution:

  • Set initial header styling with white text and transparent background using CSS
  • Add JavaScript event listener to detect scroll position (threshold: 50px) and toggle a .scrolled class on the header element
  • Define CSS rules for the .scrolled class to apply black text and white background

Implementation Details:
The solution requires modifications to both CSS/SCSS files and JavaScript files (theme.js). Code snippets were provided for all three components.

Current Status:
The original poster shared a screenshot asking for clarification on where to add the CSS code. Another community member requested the store URL to provide more specific guidance. The store URL (scanditure.com) was shared, but the implementation remains incomplete and awaiting further assistance.

Summarized with AI on November 1. AI used: claude-sonnet-4-5-20250929.
1

Dear All,

Would yo know how to set the Header main menu at the top of the page in Craft theme in thee steps:

Set in white text and transparent background (easy part)

TO

Black text and white background when you scroll down?

Thank you!

2

Hope this can help you
So for this one, you’ll need to do a bit of custom CSS and JavaScript magic. Here’s how you can do it in three steps:

  1. Set the white text and transparent background: Go into your theme’s CSS/SCSS file and style your header with white text and a transparent background for the main menu. You might already have this, but if not, you can use something like:

    css

    .header-main-menu {

    color: white; background: transparent;
    }

  2. Add a class for the scroll effect: Use a bit of JavaScript to detect when the user scrolls. This can be done by adding an event listener that adds a class (like .scrolled) to the header once you start scrolling. You can add this in your theme.js or similar JS file.

    javascript

    window.onscroll = function() {

    var header = document.querySelector(‘.header-main-menu’); if (window.scrollY > 50) { header.classList.add(‘scrolled’); } else { header.classList.remove(‘scrolled’); } };

  3. Change text and background color on scroll: In your CSS, use the .scrolled class to change the text color to black and the background to white when scrolling.

    css

    .header-main-menu.scrolled {

    color: black; background: white; }

3

thanks for coming back, is it here where i need to add these codes?

css.png
css.png427×425 63.8 KB

4

Hi @GiudFabri123 ,

Thank you for reaching out to the Shopify community. I’d be glad to assist you. Could you kindly share your store URL and
password (if it’s password-protected) so I can review it and provide you with an update?

5

www.scanditure.com