Change colour of text on nav bar on selected page

Store Design
1

Hello Shopify Community,

We are trying to change the text colour in our nav bar to white only on the Library page (https://www.nooroots.com/blogs/library) while keeping it standard on other pages. Unfortunately, the changes to colour schemes on the Shopify editor effects the whole website and not single pages.

Is there a way to override this?

Best regards

nooroots

2

Yes, there’ll be a need for custom coding. Do you have coding skills? If no then you’ll have to send me a collaborator access and I can work on that for you.

3

Hey Lunaworks, thanks for getting back to me.

Yes - if you have a solution I would be able to code it :slightly_smiling_face:

4

Hello @nooroots

Follow below steps and paste the code:

  1. Go to Online store > Edit Code >> https://prnt.sc/BjGmbYsm1Tbp
  2. Open layout > theme.liquid >> https://prnt.sc/ylrKSuPzT_Jr
  3. Check for tag >> https://prnt.sc/uQjZ4FGkK2Vl
  4. Paste code above the tag
{% if template contains 'blog' %}

{% endif %}

​
  1. Save
5

Hi Savior

Thanks for the help. The code worked and the text in now white on the library page.

A sticky header has been applied so when scrolling up the code is white.

I have added custom code to the bottom of the base.css file that altered the header to make it transparent

.header-wrapper
{

position: absolute;

background: transparent;

width: 100%;

}

.shopify-section-header-sticky .header-wrapper
{

position: sticky !important;

width: 100% !important;

background: #ffffff !important;

}

Is there a additional code to just apply the white text to the header when you land on the page and not on the sticky header?

Thanks

nooroots

6

Please replace previous code with below code

{% if template contains 'blog' %}

{% endif %}

​
7

Thanks Savior, this works great!

Very best

nooroots