What's your biggest current challenge? Have your say in Community Polls along the right column.

Re: Change background colour in header of Damn Theme

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
9180 2191 2708

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.
If this fixed your issue, Likes and Accept as Solution are highly appreciated. Coffee tips fuel my dedication.
Get experienced Shopify developers at affordable rates—visit Made4Uo.com for a quick quote!
Need THEME UPDATES but have custom codes? No worries, for an affordable price.
Create custom Shopify pages effortlessly with PageFly's drag-and-drop ⚙️.

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 10 (10)

NomtechSolution
Astronaut
1245 113 154
  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 213

@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
9180 2191 2708

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.
If this fixed your issue, Likes and Accept as Solution are highly appreciated. Coffee tips fuel my dedication.
Get experienced Shopify developers at affordable rates—visit Made4Uo.com for a quick quote!
Need THEME UPDATES but have custom codes? No worries, for an affordable price.
Create custom Shopify pages effortlessly with PageFly's drag-and-drop ⚙️.
JudithAY
Tourist
5 1 1

This is an accepted solution.

It works. Thank you

Made4uo-Ribe
Shopify Partner
9180 2191 2708

Welcome, Happy to help.😊

If this fixed your issue, Likes and Accept as Solution are highly appreciated. Coffee tips fuel my dedication.
Get experienced Shopify developers at affordable rates—visit Made4Uo.com for a quick quote!
Need THEME UPDATES but have custom codes? No worries, for an affordable price.
Create custom Shopify pages effortlessly with PageFly's drag-and-drop ⚙️.
kay_png
Excursionist
18 0 7

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
Shopify Partner
9180 2191 2708

Do you have sample for the design? Thanks!

If this fixed your issue, Likes and Accept as Solution are highly appreciated. Coffee tips fuel my dedication.
Get experienced Shopify developers at affordable rates—visit Made4Uo.com for a quick quote!
Need THEME UPDATES but have custom codes? No worries, for an affordable price.
Create custom Shopify pages effortlessly with PageFly's drag-and-drop ⚙️.
kay_png
Excursionist
18 0 7

Here's the sample:

Screenshot 2024-08-07 071857.png