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

Store Design
, , ,
1

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

2

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;

websensepro_0-1689056532298.png
websensepro_0-1689056532298.png1341×614 923 KB

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

3

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 tag

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

Best Regards,
Moeed

4

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.

5

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

6

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 tag

Moeed_0-1689057637877.png
Moeed_0-1689057637877.png1899×896 148 KB

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

Best Regards,
Moeed

7

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;

websensepro_0-1689057596840.png
websensepro_0-1689057596840.png1333×617 291 KB

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

8

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 tag

It will look like this-

sandyparihar07_0-1689058070428.png
sandyparihar07_0-1689058070428.png1585×757 141 KB

Please mark as solve when works!

9

Thanks~!

10

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