Solved

Change Theme Header Background Colour – Modular Theme

JohnathanC
Excursionist
16 0 3

Hi

I'd like to have a different header colour to my main body colour – I could do this with Broadcast Theme but I don't seem to be able to do it with Modular, I can only change Body Background Colour. Does anyone know a way of doing this.

 

Many thanks

John 

Accepted Solution (1)
suyash1
Shopify Partner
9077 1129 1479

This is an accepted solution.

@JohnathanC - add the given css to the end of theme.css  and check

 

.site-header{background-color: #fff;}

.header--has-scrolled{background-color: #fff;}
To build shopify pages use pagefly
You are welcome to contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
paranormal story video using AI

View solution in original post

Replies 12 (12)

suyash1
Shopify Partner
9077 1129 1479

@JohnathanC - we will need custom css for it, please share your website link

To build shopify pages use pagefly
You are welcome to contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
paranormal story video using AI
JohnathanC
Excursionist
16 0 3

Hi Suyash
Thanks for your help

https://naitre.com

Pasword: gridlock

Zworthkey
Shopify Partner
5581 642 1565

@JohnathanC 
Which color do you want to put in the header?

JohnathanC
Excursionist
16 0 3

Hi Zworthkey

Thanks for your help

I just wanted a white colour: #ffffff

Zworthkey
Shopify Partner
5581 642 1565

@JohnathanC 
Can you please mark which section you want to put background color?
Thank You.

suyash1
Shopify Partner
9077 1129 1479

@JohnathanC - your header is already white that is #ffffff;

To build shopify pages use pagefly
You are welcome to contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
paranormal story video using AI
JohnathanC
Excursionist
16 0 3

Hi @suyash1 

Thanks for the reply

My header is displaying the same colour as the body background colour which is #f9faf5 

 

suyash1
Shopify Partner
9077 1129 1479

This is an accepted solution.

@JohnathanC - add the given css to the end of theme.css  and check

 

.site-header{background-color: #fff;}

.header--has-scrolled{background-color: #fff;}
To build shopify pages use pagefly
You are welcome to contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
paranormal story video using AI
JohnathanC
Excursionist
16 0 3

Thanks @suyash1 – that is perfect.

Really appreciated!

suyash1
Shopify Partner
9077 1129 1479

@JohnathanC - welcome, do let me know if you need anything later, you have my email below

To build shopify pages use pagefly
You are welcome to contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
paranormal story video using AI
fairline
New Member
7 0 0

Hi

This thread is great, I am trying to do the same thing. 

 

Could you just help me locate theme.css . I cant seem to find it? Is this theme.liquid? 

 

Many thanks in advance. 

Zworthkey
Shopify Partner
5581 642 1565

hii, @JohnathanC 
KIndly share your store URL so,
I can solve it.
Thank you.