Reformation theme - How to change header navigation text and icon colour?

[SarahHalim]

Hi, how do I customize color for my reformation theme header? I have few menu to update.

1. Transparent header color change to #000000 for both navigation menu and icon.
2. Menu colour customization - For Clearance tab change to #F70000 

I also want to know how to customize the shopify search and shopping bag icon as i have my own icon.

this is my store url: https://msreadshop.com/ 

Thank you

[Moeed · Accepted solution]

Hey @SarahHalim 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file
4) Add the following code in the bottom of the file above </body> tag

<style>
header#header {
    background: #000000 !important;
}

.thb-secondary-area-item.thb-secondary-myaccount img {
    filter: invert(1);
}
</style>

If I managed to help you then, don't forget to Like it and Mark it as Solution!

Best Regards,
Moeed

[Moeed · Accepted solution]

Hey @SarahHalim 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file
4) Add the following code in the bottom of the file above </body> tag

<style>
.header.transparent--true:not(:hover):not(.is-sticky) .thb-full-menu>li>a {
    color: black !important;
}
</style>

If I managed to help you then, don't forget to Like it and Mark it as Solution!

Best Regards,
Moeed

[websensepro]

Hi, @SarahHalim.

Follow These steps,

Go to the online store theme and go to base.css file paste the code mentiond below.

header#header {
    background: #000000 !important;
}

.thb-secondary-area-item.thb-secondary-myaccount img {
    filter: invert(1);
}

Result;

If I managed to help you then, don't forget to Like it and Mark it as Solution!

[SarahHalim]

hi websenpro, sorry i have a typo in question. I would like to change the transparent header text only to #000000 and the clearance tab change to #F70000

Hope you can help.

[websensepro]

Add these css.

Go to the online store theme and go to base.css file paste the code mentiond below.

.thb-secondary-area-item.thb-secondary-myaccount img {
    filter: invert(1);
}

a.thb-secondary-area-item.thb-my-wishlist img {
    filter: invert(1);
}

.header.transparent--true:not(:hover):not(.is-sticky) .thb-full-menu>li>a {
    color: #000000 !important;
}

.thb-full-menu li.menu-item-has-children>a svg {
    filter: invert(1);
}

Result;

If I managed to help you then, don't forget to Like it and Mark it as Solution!

[Moeed · Accepted solution]

Hey @SarahHalim 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file
4) Add the following code in the bottom of the file above </body> tag

<style>
header#header {
    background: #000000 !important;
}

.thb-secondary-area-item.thb-secondary-myaccount img {
    filter: invert(1);
}
</style>

If I managed to help you then, don't forget to Like it and Mark it as Solution!

Best Regards,
Moeed

[SarahHalim]

hi Moeed, sorry I have a typo in question. I would like to change the transparent header text only to #000000 and the clearance tab change to #F70000

[Moeed · Accepted solution]

Hey @SarahHalim 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file
4) Add the following code in the bottom of the file above </body> tag

<style>
.header.transparent--true:not(:hover):not(.is-sticky) .thb-full-menu>li>a {
    color: black !important;
}
</style>

If I managed to help you then, don't forget to Like it and Mark it as Solution!

Best Regards,
Moeed

[saim007 · Accepted solution]

Hi @SarahHalim 

Follow Below Steps to solve your all problems:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file
4) Add the following code in the bottom of the file above </body> tag

<style>
.header.transparent--true:not(:hover):not(.is-sticky) .thb-full-menu>li>a {
    color: #000;
}
.thb-full-menu a[title="CLEARANCE"] {
    color: #f70000;
}
.header.transparent--true:not(:hover):not(.is-sticky) svg path {
    stroke: #000;
}
</style>

It will look like this-

Please mark as solve when works!

[SarahHalim]

Thanks~!

[Jean-h]

hey may I have the same theme. how did you change the"my account"  LOGIN text into the icon?