How To Change Header Strip Mobile Background Color In The Booster 2.0 Theme Code

Topic summary

A user encountered an issue where the Header Strip in the Booster 2.0 theme displays an incorrect background color specifically in mobile view, while desktop appears correct.

Desired outcome: Set the Header Strip background to #f3f3f3 across all views.

Solution provided:

  1. Navigate to Online Store > Edit code
  2. Add custom CSS code above the </body> tag in the theme.liquid file
  3. Target the mobile Header Strip section with specific CSS styling

Resolution: The proposed CSS solution successfully resolved the mobile background color issue. The discussion includes screenshot references showing the code implementation steps, though the actual CSS snippet and image details appear corrupted in the thread text.

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

Hi everyone! I’m finding a glitch to where my Header Strip doesn’t have the proper color in mobile view only. I’ve tried researching answers, but everything that comes up for it is only concerning the main header.

Would anyone be able to please point me to the location of this setting in the code and the proper method of updating it so I can set it to be #3f3f3f across all views?

My Site: tempestkeychains.myshopify.com

What it is right now: https://i.gyazo.com/139b667a0834429226061c319c46d455.png
What I want it to be: https://i.gyazo.com/c993e44a3e74361eacf6a1ff1fc3371f.png

Hi @HoodShine ,

Glad to support you today.

To can change the background of Header Strip Mobile section, you can check out my suggestion below to make it:

  1. Go to Edit code on Online Store:

  1. add my code above the tag on Theme.liquid:

Eg:

I hope you find the answer helpful.

Kind & Best regards,
GemPages Support Team.

1 Like

THANK YOU SO MUCH

I am glad that my solution is helpful to you :grin: .

1 Like