How can I change my scrolling header color to black?

Store Design

Topic summary

A user wants to change their Shopify store’s header color to black when scrolling down on the main page.

Initial Responses:

  • One commenter suggested hiring a Shopify expert for coding assistance, as they lacked formal training to provide a direct solution.
  • The original poster confirmed they needed a coding solution.

Solution Provided:
A detailed step-by-step coding fix was shared:

  1. Navigate to Online Store > Themes > Edit Code in the Shopify Admin
  2. Open the styles.css file
  3. Add CSS code targeting #pageheader elements to set background colors (transparent for one state, black for scrolling)
  4. Place the code at the end of the CSS file in the Assets folder

Outcome:
The original poster thanked the community, indicating the solution was helpful. The issue appears resolved with the provided CSS code snippet.

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

Hi,

If I want to make the main page when I am scrolling down, the header become black color too. How should I do? Thanks.https://phantomgogo.com/

1 Like
2

Hey, @Kathy518

I’m not formally trained in code to provide you with an exact solution to change the color of your homepage header color. However, I’m confident one of our Shopify experts would be able to accomplish this at a reasonable price.

Just wanted to share this as an option in case you are unable to find a coding solution in your thread.

If there is anything else I can help you with, please let me know.

3

I may need the coding solution. Thank you!

4

Hi @Kathy518 ,

You can follow the instructions below to make your header black when scrolling down.

  1. From you Admin page, go to Online store > Themes > click the three dots > Edit code

  2. Open styles.css file under the Asset folder.

  3. Add the code below at the very end the file

div#pageheader {
    background: black;
}

div#pageheader.pageheader--transparent {
    background: transparent;
}
5

Thanks a lot.

1 Like