Solved

Change background colour in header of Damn Theme

JudithAY
Tourist
5 1 1

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

Accepted Solutions (2)

Made4uo-Ribe
Shopify Partner
5244 1258 1545

This is an 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:
  • Ribe_Dagandara_0-1686058063784.png
  • If its not working would you mind to share your URL website with password? 
  • Thanks! 
  • I hope it help.
Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
Need a knowledgeable developer? Come and visit us at

Made4uo.com


View solution in original post

JudithAY
Tourist
5 1 1

This is an accepted solution.

It works. Thank you

View solution in original post

Replies 7 (7)

NomtechSolution
Astronaut
1245 113 147
  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
Tourist
5 1 1

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

Ujjaval
Shopify Partner
1242 197 206

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

Ujjaval_0-1686054469382.png

 

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
Tourist
5 1 1

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

Made4uo-Ribe
Shopify Partner
5244 1258 1545

This is an 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:
  • Ribe_Dagandara_0-1686058063784.png
  • If its not working would you mind to share your URL website with password? 
  • Thanks! 
  • I hope it help.
Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
Need a knowledgeable developer? Come and visit us at

Made4uo.com


JudithAY
Tourist
5 1 1

This is an accepted solution.

It works. Thank you

Made4uo-Ribe
Shopify Partner
5244 1258 1545

Welcome, Happy to help.😊

Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
Need a knowledgeable developer? Come and visit us at

Made4uo.com