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

DigitalMemoryBx · ‎05-24-2024

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.

ThePrimeWeb · ‎05-24-2024

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

ThePrimeWeb · ‎05-24-2024

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.

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 · ‎05-24-2024

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 · ‎05-24-2024

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 · ‎05-24-2024

Thank you so much! That's worked.

DigitalMemoryBx · ‎05-25-2024

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 · ‎05-25-2024

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 · ‎05-26-2024

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

DigitalMemoryBx · ‎05-26-2024

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

ThePrimeWeb · ‎05-26-2024

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 · ‎05-26-2024

Thank you very much! 🙂

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