How can i change color of my header | debut

Solved
Jasoliya
Shopify Expert
4231 569 1042

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

Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com Or WhatsApp Or Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
0 Likes
ginafu
New Member
5 0 0

hey @Jasoliya 

 

https://tootthii.myshopify.com

 

password: ui2kpw01!

 

0 Likes
Jasoliya
Shopify Expert
4231 569 1042

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. 

Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com Or WhatsApp Or Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
0 Likes
itryhard
Excursionist
17 2 10

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
New Member
1 0 0

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:

 

header.JPG

 

Would you know how to fix that? 

0 Likes
jawadaazeemi
New Member
2 0 0
  • 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. 
0 Likes
jawadaazeemi
New Member
2 0 0

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

0 Likes
ju1es
Tourist
8 0 1

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 that annoying white line?

 

 

 

 

 

See the annoying white line?

How can I get rid of it?

Thanks so much in advance.

Ju1es

ju1es
Tourist
8 0 1

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

0 Likes
Jasoliya
Shopify Expert
4231 569 1042

Which color you mean? send me store url 

Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com Or WhatsApp Or Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
0 Likes