Changing the background color of the header - debut theme

Highlighted
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.

 


@Liam wrote:

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
Highlighted
New Member
2 0 0

Hi thanks for the help above, it kinda worked but still need some tweaks and i suck at coding.

Heres what i need.

I want the whole header to be black 

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

so i imputed this as suggested in the  theme.scss.liquid file. 

The color of my background page is white (thus the clor of text is black) 

So how do i put the header background black but its text in white? 

a thousand thank you guys!

0 Likes
Highlighted
New Member
2 0 0

thank you!!! this made it for me!

0 Likes
Highlighted
New Member
4 0 0

Yeah.. thats exactly what it said to do. But again, this does not exist under assets: theme.scss.liquid

picturemessage_rgdr31dt.0qq.png

0 Likes
Highlighted
Tourist
10 1 0

Hi

 

We are using the Debut theme and want to change the header only to a black background and obviously then get the icons to be white, have tried using the code in the previous post, but it only gets the two ends of the header black and the middle part with the menu and icons is still white?? (See Screenshot) Any help appreciated as tried Shopify Support via chat and got nowhere

Screen Shot 2019-08-15 at 10.47.24.png

 

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

 

0 Likes
Highlighted
New Member
2 0 0

Open all the Sections then press Ctrl+F type theme.scss and you should see it.

0 Likes
Highlighted
New Member
2 0 0

use this code @Paulo_232 

 

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

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

div#shopify-section-header.shopify-section {
  background-color: #000000;
}
0 Likes
Highlighted
New Member
1 0 0

It works for me but I have the same problem of the header letters. The header is black and the letters too. How can I change it to white? without changing the whole background 

0 Likes

Hello @acontrerasnava,

1. Go to Online Store->Theme->Edit code
2. Asset->theme.scss.liquid->paste bellow code in bottom of file

#AccessibleNav .site-nav__link {
	color: #fff;
}
Want to modify or incorporate custom changes on store, Hire us.
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Free Review and advice for sale on store | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | SEO & Digital Marketing | Site Speed Optimization | Performance Site Audit
0 Likes