Solved

How do I change site header colour and text colour on a specific page only

DigitalMemoryBx
New Member
8 0 0

Hello there!

 

I'd like to change the header background colour to black and the text to white.

ONLY on this specific https://digitalmemorybox.co.uk/products/memory-capsule page.

 

I am on the Impulse theme.

 

Can somebody please tell me how I'd do this?

Much appreciated.

 

 

11.png

Accepted Solution (1)
ThePrimeWeb
Shopify Partner
2138 614 487

This is an accepted solution.

Oh, Just remove that code and replace it with this. Instructions are the same.

 

<style>

html:has(link[href="https://digitalmemorybox.co.uk/products/memory-capsule"]) ul.site-nav.site-navigation.small--hide > li > a,
html:has(link[href="https://digitalmemorybox.co.uk/products/memory-capsule"]) ul.site-nav.site-navigation.small--hide li > details > summary,
html:has(link[href="https://digitalmemorybox.co.uk/products/memory-capsule"]) .site-header svg {
    color: #fff !important;
}

html:has(link[href="https://digitalmemorybox.co.uk/products/memory-capsule"]) header#SiteHeader {
    background-color: black !important;
}

html:has(link[href="https://digitalmemorybox.co.uk/products/memory-capsule"]) .site-header .site-header__logo img {
    filter: invert(1) !important;
}
</style>
Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!

View solution in original post

Replies 10 (10)

ThePrimeWeb
Shopify Partner
2138 614 487

Hey @DigitalMemoryBx ,

 

Go to your theme's "Edit Code" Option, then in the search bar type "theme.liquid"
Below the tag "<head>" tag paste the following. Screenshot attached for reference.

<style>
ul.site-nav.site-navigation.small--hide > li > a,
ul.site-nav.site-navigation.small--hide li > details > summary,
.site-header svg {
    color: #fff !important;
}

header#SiteHeader {
    background-color: black !important;
}

.site-header .site-header__logo img {
    filter: invert(1) !important;
}
</style>

 

Screenshot is for reference only, the correct code to paste is the one shown above.

ThePrimeWeb_0-1716576049191.jpeg

 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!
DigitalMemoryBx
New Member
8 0 0

Thank you for your reply.

 

This has worked but has also changed it on the whole site.

I'd like for it to change on this 1 page only (link below)

https://digitalmemorybox.co.uk/products/memory-capsule

ThePrimeWeb
Shopify Partner
2138 614 487

This is an accepted solution.

Oh, Just remove that code and replace it with this. Instructions are the same.

 

<style>

html:has(link[href="https://digitalmemorybox.co.uk/products/memory-capsule"]) ul.site-nav.site-navigation.small--hide > li > a,
html:has(link[href="https://digitalmemorybox.co.uk/products/memory-capsule"]) ul.site-nav.site-navigation.small--hide li > details > summary,
html:has(link[href="https://digitalmemorybox.co.uk/products/memory-capsule"]) .site-header svg {
    color: #fff !important;
}

html:has(link[href="https://digitalmemorybox.co.uk/products/memory-capsule"]) header#SiteHeader {
    background-color: black !important;
}

html:has(link[href="https://digitalmemorybox.co.uk/products/memory-capsule"]) .site-header .site-header__logo img {
    filter: invert(1) !important;
}
</style>
Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!
DigitalMemoryBx
New Member
8 0 0

Thank you so much! That's worked.

DigitalMemoryBx
New Member
8 0 0

Is there a way to make my hero video on the https://digitalmemorybox.co.uk/products/memory-capsule page to cover the navigation bar/header? So the video goes up into the header.

 

I'd like the video to go into the header like I have with the image on my home page: www.digitalmemorybox.co.uk

 

Thank you,

DMB

ThePrimeWeb
Shopify Partner
2138 614 487

Can you replace the entire code with this? It's the same code, but modified to fit your new requirement.

 

<style>

html:has(link[href="https://digitalmemorybox.co.uk/products/memory-capsule"]) ul.site-nav.site-navigation.small--hide > li > a,
html:has(link[href="https://digitalmemorybox.co.uk/products/memory-capsule"]) ul.site-nav.site-navigation.small--hide li > details > summary,
html:has(link[href="https://digitalmemorybox.co.uk/products/memory-capsule"]) .site-header svg {
    color: #fff !important;
}

html:has(link[href="https://digitalmemorybox.co.uk/products/memory-capsule"]) header#SiteHeader {
    background-color: transparent !important;
}

html:has(link[href="https://digitalmemorybox.co.uk/products/memory-capsule"]) .site-header .site-header__logo img {
    filter: invert(1) !important;
}

.header-sticky-wrapper {
  position: absolute !important;
  width: 100% !important;
}
</style>

 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!
DigitalMemoryBx
New Member
8 0 0

Perfect mate thank you. Sorry about that change. Really appreciate it.

DigitalMemoryBx
New Member
8 0 0

Actually this has changed it every page on the site rather than just the https://digitalmemorybox.co.uk/products/memory-capsule page.

 

ThePrimeWeb
Shopify Partner
2138 614 487

Just change it to this @DigitalMemoryBx,

 

<style>

html:has(link[href="https://digitalmemorybox.co.uk/products/memory-capsule"]) ul.site-nav.site-navigation.small--hide > li > a,
html:has(link[href="https://digitalmemorybox.co.uk/products/memory-capsule"]) ul.site-nav.site-navigation.small--hide li > details > summary,
html:has(link[href="https://digitalmemorybox.co.uk/products/memory-capsule"]) .site-header svg {
    color: #fff !important;
}

html:has(link[href="https://digitalmemorybox.co.uk/products/memory-capsule"]) header#SiteHeader {
    background-color: transparent !important;
}

html:has(link[href="https://digitalmemorybox.co.uk/products/memory-capsule"]) .site-header .site-header__logo img {
    filter: invert(1) !important;
}

html:has(link[href="https://digitalmemorybox.co.uk/products/memory-capsule"]) .header-sticky-wrapper {
  position: absolute !important;
  width: 100% !important;
}
</style>
Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!
DigitalMemoryBx
New Member
8 0 0

Thank you very much! 🙂