How can i change color of my header | debut

[Embey]

I want to change color of my header on debut theme.

[Jasoliya]

Hi @Embey 

Want to change bg color of header? 

[Embey]

Thanks for reply, yes i want to change header background color

[Jasoliya · Accepted solution]

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

.site-header__mobile-nav,.site-header{ background-color: red;}

If you add just .site-header then you can see only color at left and right part 

[Embey]

@Qualitycheck  and @oscprofessional  thank you for reply but yes its just changing left and right part of header

@Jasoliya  thank you so much for your reply and solution it work great 🙂

[ginafu]

Hi @Jasoliya sorry to re-open this topic and while your solution worked great after looking at this forum for hours. I can't seem to find how to change the header text color for the DEBUT theme to white, please?

[Jasoliya]

You want to change header text like icon and menu color?

send me your store url

[ginafu]

new to shopify so the store isnt' UP yet but getting there meanwhile I was
able to add the following using some of my basic skills:

/* Changing the header background color to blue. */

.site-header__mobile-nav,.site-header{ background-color: #014260;}

/*Changing the header text color to white */

.site-nav__link--active .site-nav__label {
border-bottom-color: rgba(255,255,255,0.85);
}

.site-nav__link .site-nav__label {
color: rgba(255,255,255,0.85);
}
.site-nav li a {font-weight: 600;}

which DOES give me the white text but

1. its not as BOLD as the footer (not the same boldness at leat) - I guess
'font weight' is adding 'bold' (?)
2. I use Rubik as font in the footer/body (or entier shopify site for that
matter) , I'd like the header font to be the same (I think it is but
perhaps due the font not being bold it doesnt look the same)

3. When navigating to the mobile site; i still see the black font in the
header

Please assist.

Thanks

[Jasoliya]

But we must need store url for that, you can send password and url in mail or PM me

[ginafu]

hey @Jasoliya 

https://tootthii.myshopify.com

password: ui2kpw01!

[Jasoliya]

In your site its issue of font not color, so try to change font from theme editor or we have to make font working  because its issue in current font. 

[itryhard]

I made a video on how to do this with header and footer with nav link color change.

Here is the code to paste in the bottom of theme.scss.liqd

.site-header__logo {
    color: #ffffff;
}

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

footer.site-footer {
   background-color: #212F3D  ;
}

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

#AccessibleNav .site-nav__link {
	color: #fff;
}

body.index #Header #Logo {color:#ffffff}

.icon-search {
  color: white;
  
}

.icon-cart {
  color: white;
  
}

.icon-login {
  color: white;
  
}


.icon-hamburger {
  color: white;
  
}

#SearchDrawer {
  z-index:1001;
}

#shopify-section-header {
  position: fixed;
  z-index:1000;
  left:0;
  right:0;
  -webkit-box-shadow:0px 2px 4px 0px rgba(0,0,0,.1);
  -moz-box-shadow:0px 2px 4px 0px rgba(0,0,0,.1);
  -ms-box-shadow:0px 2px 4px 0px rgba(0,0,0,.1);
  -o-box-shadow:0px 2px 4px 0px rgba(0,0,0,.1);
  box-shadow:0px 2px 4px 0px rgba(0,0,0,.1);
  background-color: {{ settings.color_body_bg }};
}

#PageContainer {
  padding-top: 80px;
}

@media screen and (max-width: 749px) {
#PageContainer {
  padding-top: 70px;
}
}

@media screen and (max-width: 769px){
  .slideshow__title, .slideshow__subtitle {
     display: block !important;;
  }
  .slideshow__text-wrap--mobile{
    display: none !important;;
  }
}

[jess123]

Thank @itryhard! That worked really well! You saved me so much time!

Just one thing, the underline in the header remained in a darker colour not white:

Would you know how to fix that? 

[jawadaazeemi]

This is the perfect reply I am searching from the last 5 hours continuously on this community as well on you-tube but all have placed responses half half bases. Only this reply is perfect having all what was being questioned ! Thanks

[ju1es]

Hi Jasoliya

I followed your instructions in this post and also from another post, as I needed to change the colour of the icons and text as well.

I have added this code to the bottom of theme.scss.liquid

.site-header__mobile-nav,.site-header{ background-color: #3D636F;}
/*===== Change header, nav item, icons, footer items color - Feb 6, 2018 ======*/
header.site-header h1,
header.site-header a,
header.site-header svg,
footer.site-footer small,
footer.site-footer a,
footer.site-footer svg {
color: #FBA935;
}

It all works fine apart from a tiny but really annoying problem. There is a white line between the header and the image below the header.

I can't provide a URL as the theme is not live now. But here is a screenshot.

see that annoying white line?

See the annoying white line?

How can I get rid of it?

Thanks so much in advance.

Ju1es

[ju1es]

Hey,

The white line is actually a line in the theme, which can be changed color by changing the theme Line Color. Weird, but true!

So this changes all the lines on my website, just to remove that line in the header.

If there is a way to change the color of this line without changing the theme line color, that would be great!

Thanks

[Jasoliya]

Which color you mean? send me store url 

[ju1es]

Hi Jasoliya

Actually I can't send the URL as the theme is not live.

Can you see the white line between the header and the image below? 

I have removed it by changing the theme line color from white to the same color as the header. However, this changes the line color throughout the website. I only want to change the line color for this.

[PrimeGancho]

How did you get rid of the white line? Can you paste the css fix in here please? Thanks!

[Jasoliya]

Send me store url 

[Jasoliya]

Send me preview link on PM, because i have to check code or that.

[Des_lab7]

Thanks @ju1es ! Worked for me!

[Maqou]

I don't have the theme.scss file

[oscprofessional]

Hello Embey_vally,
Add this css at bottom of
Online Store-> Themes -> Edit code->Assets->theme.scss.liquid

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

Please share your site url if any help needed. 

[jawadaazeemi]

• Unluckily the code provided in your given link is not working as it is only make a little right and little left side to be changed what I give the colour in code. Not the color of all header changed with this code.

  header.site-header.border-bottom.logo--left {
  background-color: gray;
  }
• The above code is not working which i narrated above. 

[doguebygina]

Hi there,

I also wanted to change the background color of the header on my Debut homepage only (wanted to change from my custom logo color to white)... I tried these instructions given and it didn't work. It only changed a part of the header toward the top of the header, (the background color behind the page headings and logo did not change). So I undid it so that it would go back to what it was before I attempted to make the change, BUT there's now code at the very top of the website. I can't figure out where it's coming from so I can't get rid of it. So I'm requesting help removing the code at the top of the home page as well as requesting different instructions as to change the home page header background color to white.

Can you possibly help? See attached pic for the code at the top.

www.doguebygina.com

[Jasoliya]

Send your store password here or Pm me

[Philip89]

Thanks for the code provided guys, I have used it to make both the header and footer in my store black.

Two things though:

The header is now floating, which is great, but it is always slightly blocking the element below.

When you click on a navigation item in the header it will expand. Since the background of this expanded little menu is still white it creates a problem as white letters on white background aren't readable.

Could you please help me out? The url is chrovino.de and the password heplay.

[Philip89]

Tagging @Jasoliya since I only recently realized that that's possible

[Philip89]

@Jasoliya on mobile it works, white menus with black letters. How do I change that for desktop as well? Thanks! 🙂

[Qualitycheck]

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

.site-header {
background-color: #cccccc;
}