Changing the background color of the header - debut theme

New Member
2 0 0

Hey,

I would like to change the color of my header to black - the rest of the site should remain white. There's only the option of changing the background color of the whole site. So how can I change the header color only?

By the way: Why doesn't anyone of the Shopify team members fix the issue with the non responsive main image in the debut theme? It looks creepy on mobile devices. There are enough complaints on the theme site.

Markus

0 Likes
Shopify Staff
Shopify Staff
555 4 86

Hi Markus,

Liam here from Shopify - thank you for your question :)

Great to see you are looking to set up your theme exactly how you would like, so let's see how you can set the background of your header to black.

The easiest way to do this might be to add some CSS to your stylesheet. You can find the stylesheet within the Edit HTML section in the Assets folder and you're looking for a file called theme.scss.liquid and you will be adding your changes to the very bottom of this file. It's very important not to change any code in the middle of the file as the SCSS file cannot be rolled back, so if there's a problem with new code it is easy to find it at the bottom. You could add this code to the bottom of your theme.scss.liquid file:

header.site-header.border-bottom.logo--left{
  background-color: #000000;
}


I hope this helps Markus, if you have any other questions, please let me know.

Cheers,

Liam | Partner Education

support@shopify.com

1 Like
New Member
2 0 0

Worked! Thanks a lot for your help, Liam!

0 Likes
New Member
15 0 0

Hi,

I've got the same issue and despite following the instructions given above, no change is occuring :(

I'm trying to change the color in the header and footer to #ff1a1a but with no joy.....help would be so appreciated....

 

Thank you.

 

Virginia

0 Likes
Shopify Staff
Shopify Staff
555 4 86

Hi Virginia,

If you would like to change the background color of your header and footer, you would need to add the code below to the very bottom of your theme.scss.liquid file:

div#shopify-section-header.shopify-section {
  background-color: #ff1a1a;
}

footer.site-footer {
   background-color: #ff1a1a;
}

Hope this helps- please let me know if you have any other questions,

Liam

0 Likes
New Member
2 0 0

Hi Liam,

I am having the same issue with the Debut theme but am only trying to change the background color for the header, not the footer.  I used the below code but changed the color code to black:

div#shopify-section-header.shopify-section { background-color: #000000; }

This only changed the color of my navigation bar and left the top section of the header white (where my logo and CTA buttons are located).  I would like for the entire header to be black.  Is there a code to accomplish this?

Thank you for any help!

Courtney

0 Likes
Excursionist
57 0 6

Hello. Thanks for the code. The header did turn black, so good! 

But the Header texts/navigation is too dark. How do I turn that text / navigation to a brighter white, without changing the rest of the Navigation Text color without changing the rest of the product text or title body?

 

0 Likes
New Member
5 0 0

Actually I had to a bit more to get the whole header to change color. I used this code and it worked great.

header.site-header.border-bottom.logo--left{
  background-color: #000000;
}
  
.site-header__mobile-nav {
  background-color: #000000 !important;
}

0 Likes
New Member
1 0 1

Hi,

I tried all your suggestions and it wasn't working for me (still had blank spaces) so I tweak the codes and finished with this:

header.site-header {
  background-color: #f1ead9;
}
  
.site-header__mobile-nav {
  background-color: #f1ead9 !important;
}

footer.site-footer {
   background-color: #f1ead9;
}

div#shopify-section-header.shopify-section {
  background-color: #f1ead9;
}

However, with this code, I still have a white space at the bottom of my page. Can someone help me with this please?

Thank you 

1 Like
New Member
4 0 0

There is not anything named this in the Assets folder. Closest thing is styles.scss.liquid and when I added this code here, nothing happened.

0 Likes