Change background colour in header of Damn Theme

[JudithAY]

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

[Made4uo-Ribe · Accepted solution]

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;
}

• Result Sample:
• 
• If its not working would you mind to share your URL website with password? 
• Thanks! 
• I hope it help.

[NomtechSolution]

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]

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

[Ujjaval]

@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
}

[JudithAY]

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

[Made4uo-Ribe · Accepted solution]

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;
}

• Result Sample:
• 
• If its not working would you mind to share your URL website with password? 
• Thanks! 
• I hope it help.

[JudithAY · Accepted solution]

It works. Thank you

[Made4uo-Ribe]

Welcome, Happy to help.😊

[kay_png]

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? 

[Made4uo-Ribe]

Do you have sample for the design? Thanks!

[kay_png]

Here's the sample: