How can i change color of my header | debut

Solved
Highlighted
Shopify Expert
3652 549 883

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
Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
0 Likes
Highlighted
New Member
5 0 0

hey @Jasoliya 

 

https://tootthii.myshopify.com

 

password: ui2kpw01!

 

0 Likes
Highlighted
Shopify Expert
3652 549 883

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
Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
0 Likes
Highlighted
Excursionist
16 2 5

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;;
  }
}
4 Likes
Highlighted
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
Highlighted
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
Highlighted
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
Highlighted
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

1 Like
Highlighted
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
Highlighted
Shopify Expert
3652 549 883

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
Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
0 Likes