Change Header Color in Simple Theme?

Solved

Change Header Color in Simple Theme?

wm820
Excursionist
15 1 1

How can we change the Header Color in the Simple Theme. I was informed that it is a Transparent Header and can't easily be changed.  We wanted to change the header to "black" at the website www.automotivevintage.com. Any help would b

Accepted Solution (1)
wm820
Excursionist
15 1 1

This is an accepted solution.

That worked. Thank you very much for your help.

View solution in original post

Replies 6 (6)

Made4uo-Ribe
Shopify Partner
9873 2352 2949

Hi @wm820 

Do you mean like this?

Made4uoRibe_0-1722275278082.png

If it is check this one. 

 

  1. From you Admin page, go to Online Store > Themes
  1. Select the theme you want to edit
  2. Under the Asset folder, open the main.css(base.css, style.css or theme.css)
  3. Then place the code below at the very bottom of the file.

 

.top-bar, .top-bar a {
    background: black;
    color: white !important;
}
svg.icon.icon-search, .top-bar input {
    color: white;
}
.top-bar.grid {
    margin: 0;
}
.grid__item.medium-up--two-fifths.small--one-half.text-right {
    padding-right: 30px;
}

 

  • And Save. 

 

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

If this fixed your issue, Likes and Accept as Solution are highly appreciated. Coffee tips fuel my dedication.
Get experienced Shopify developers at affordable rates—visit Made4Uo.com for a quick quote!
Need THEME UPDATES but have custom codes? No worries, for an affordable price.
wm820
Excursionist
15 1 1

Not that area. The "green" outline area in the attached image.2024-07-29 13_57_37-.png

 

Made4uo-Ribe
Shopify Partner
9873 2352 2949

Okay, since your logo is black it would not be visible. On that case, it will be like this. 

Made4uoRibe_0-1722277418615.png

this is the code i used. 

 

header.site-header.grid.medium-up--grid--table {
    background: black;
    color: white;
}

 

And Save. 

 

 

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

If this fixed your issue, Likes and Accept as Solution are highly appreciated. Coffee tips fuel my dedication.
Get experienced Shopify developers at affordable rates—visit Made4Uo.com for a quick quote!
Need THEME UPDATES but have custom codes? No worries, for an affordable price.
wm820
Excursionist
15 1 1

I placed at the end of the "theme.scss.liquid" file but it did not work.

Made4uo-Ribe
Shopify Partner
9873 2352 2949

Yes, it would not work cause it is liquid folder. If you like to place in the theme.liquid. take this instruction. 

 

From your Shopify admin dashboard, click on "Online Store" and then "Themes"

Find the theme that you want to edit and click on "Actions" and then "Edit code".

In the "theme. Liquid" file. Find the </body> tag and paste the code below before the tag. 

 

<style>
header.site-header.grid.medium-up--grid--table {
    background: black;
    color: white;
}
</style>

 

And save. 

For the asset folder which is css code, you have theme.sccs.css. 

 

 

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

 

 

If this fixed your issue, Likes and Accept as Solution are highly appreciated. Coffee tips fuel my dedication.
Get experienced Shopify developers at affordable rates—visit Made4Uo.com for a quick quote!
Need THEME UPDATES but have custom codes? No worries, for an affordable price.
wm820
Excursionist
15 1 1

This is an accepted solution.

That worked. Thank you very much for your help.