Changing Header Background Color in Debut Theme

Highlighted
New Member
2 0 1

Hello,

I am using the Debut theme and would like to change the background color of my header to black.  I want to leave the rest of my site white.  I pasted the below code into the bottom of my theme.scss.liquid but this only changed the color of the navigation bar and did nothing for the top section of the header (where the logo, cart button, and search button are located).  I would like for the entire header to be black.  Does anyone know of a code to accomplish this?

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

 

Thank you for any help!

Courtney

0 Likes
Highlighted
Shopify Staff
Shopify Staff
648 41 95

Hi, Courtney! 

When changing the top section of the header to black you will also want to then change the logo, cart icon and search to white (or another light color) so they don't disappear!

I suggest reaching out directly to support@shopify.com with your request. Please reply back here with your ticket number and I'll pass it along to our theme department to complete the changes for you :) 

If there is anything else I can do to help, just let me know! 

JP

Ren | Social team @ Shopify
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Click Accept as Solution 

0 Likes
Highlighted
Shopify Partner
151 22 23

Hi Courtney,

use .site-header{ background-color: #000000 }
 

If you need any help for theme customization. I can help you very affordable price.

Here is my email id: pankajtechcode@gmail.com

If It solves your problem, Please Like and Accept Solution.
Do you need Shopify customization and custom work on your store? Hire me.
Feel free to Contact me on pankajtechcode@gmail.com
0 Likes
Highlighted
New Member
12 0 0

this only changes the sides of the bar

 


@Pankaj_Gupta wrote:

Hi Courtney,

use .site-header{ background-color: #000000 }
 

If you need any help for theme customization. I can help you very affordable price.

Here is my email id: pankajtechcode@gmail.com


 

0 Likes
Highlighted
New Member
1 0 0
.site-header{background: black;}
.site-header .site-nav li a,.site-header__logo a{color:white;}

.site-header__mobile-nav{background: black;}
.site-nav__link--active .site-nav__label{border-bottom-color:white;}
.site-header__search-toggle{color:white;}
.site-header__cart{color:white;}

Add that code (under your own responsability) at the end of the "theme.scss.liquid" file.

It should work.

0 Likes
Highlighted
New Member
2 0 0

How can I change the button styling in the navigation bar in debut theme?

Right now the buttons I have get a underline to the label/text as the mouse rolls over it. Instead of the underlined, I just need the label/text to change a different color.

0 Likes