Change background colour in header of Damn Theme

Topic summary

Goal: change the header’s background color (sticky/fixed on scroll) in the ■■■■ theme, where built-in “Background 1/2” settings had no effect.

What was tried and suggested:

  • Via Theme Editor: navigate Customize → Header → Color scheme to set a header background.
  • Via CSS (Cascading Style Sheets): add a rule targeting the sticky header selector to force a background color (e.g., background-color: antiquewhite or a hex code). Instructions included editing theme CSS in Assets (theme.css/styles.css/base.css).

Outcome: initial attempts didn’t affect the sticky (transparent) header and a save error occurred when adding custom CSS. After correction/placement, the CSS approach worked; the header background color updated successfully.

Recent update: a follow-up request asks to color only the menu strip (red) while excluding the logo area, with white menu text. A reference screenshot was provided; specific CSS for separating logo and menu sections hasn’t been shared yet.

Status:

  • Original issue resolved (header background set via custom CSS).
  • New design request is open, awaiting guidance on CSS selectors to target only the navigation area.

Notes: Screenshots and CSS snippets are central to reproducing the solution; “sticky header” = header fixed during scroll; hex code = color value.

Summarized with AI on December 22. AI used: gpt-5.

Hi, I want to change the background colour of the Header which holds my menu at the top.

I am using Damn theme and currently whenever I shroll my page, the header will stay on top with a transparent background. I tried selecting the Background colour to Background 1 and Background 2 but in vain. Pls help

1 Like
  1. Locate the Damn theme and click on the “Customize” button.
  2. In the left sidebar, look for a section related to the header. It might be named “Header,” “Navigation,” or something similar.
  3. Within the header section, there should be an option to change the background color. It may be labeled as “Background Color,” “Background Style,” or similar.
  4. Click on the option and select the desired background color for your header. You can choose a predefined color or use a custom color by entering the hex code or using the color picker.

@JudithAY From over here you can change the header background colour
customize->header->color scheme

or you can use css to change the background color

sticky-header.header-wrapper.color-background-1.gradient.header-wrapper--border-bottom {
    background-color: antiquewhite; //you can change the color according to your desire
}

Hi @JudithAY ,

I understand that you want to change the background color of your header.

You can try this code.

  • From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
  • Find the theme that you want to edit and click on “Actions” and then “Edit code”.
  • In the “Assets” folder, click on “theme.css, styles.css or base.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
  • And Save.
eader.header.header--top-center.page-width.header--has-menu {
    background-color: red;
}

I did that but it doesn’t work, the header background which I sticked to remain at the top becomes transparent

I tried putting your code in the custom css but it said cannot be saved

It works. Thank you

Welcome, Happy to help. :blush:

Is there a way the area with the logo can be excluded? Meaning, the part with the menus only has the color red strip, then the text is white?

1 Like

Do you have sample for the design? Thanks!

Here’s the sample: