How is the variable set?

Hi all,

Long time listener, first time caller here - I’m picking up work on a project which was built by a contractor but I must now make updates to.

I need help specifically on where the variable is that sets the colour of the heading - is anyone able to find it or give me pointers on where it might be?

EDIT: It’s black by default, but on this page it’s white: Sport Manitoba

Here is my site Read-Only: Webflow - Brandish

it is black everywhere @dannyw :man_shrugging:

You do have a beige color on the link which is inherited by the inline SVG.
However I’m also seeing a style attribute in the generated HTML… so you might also have an interaction or custom code running as part of your darkmode-theme pages.

1 Like

Good catch @memetican as I was checking Headings and not logo :laughing:

1 Like

Thanks for your help so far!

Unfortunately this is the part I really need to drill down on - are there any clues about this anywhere that you’re able to see?

The CMS page you’ve highlighted is actually not live, the content is hosted on a different page. Here it is in Read Only mode (this is the page that works properly in terms of the header colour): Webflow - Brandish

And here is the one I can’t fix: Webflow - Brandish

What I’ve investigated so far:

  • Looked through layers looking for custom code blocks
  • Looked through Chrome inspector for scripts/JS
  • Investigated Interactions (they exist but are related to transparency)
  • Tried Unlinking the instance of the Navbar component to apply unique styles on the page in question

As always anything you’re able to find is much appreciated, TIA!

In general in Webflow sites, I’m used to seeing style attributes only in 4 cases;

  • Embeds containing raw element code, which includes the style
  • Custom elements that were built manually with a style attribute
  • Interactions-affected elements ( but is there a color interaction? )
  • Custom-code affected elements

The first 2 are easy to identify in the designer, just check the element. The second to are harder…

It’s a bit of work but the process I can suggest is to use chrome dev tools.
If I had to nut this out, I’d first disable JS to determine if the change is being caused by script/interactions.

If it is, then the question is where. It’s been awhile since I’ve done this but you should be able to tag the element in question and monitor it for changes in the inspector. You can set a breakpoint then to determine what code caused the change.

Success! Thank you!!

Just in-case anyone finds this in future with a similar issue: I discovered a scroll-based Interaction on one of the sub-elements of the page that was setting the colour of the navigation elements. I’d recommend methodically checking every Interaction on the page to look for anything that might be editing other class properties

1 Like