Hi,

Thanks for your follow-up.

In Nexio, the effect you’re referring to is achieved by using two separate logo files (e.g., a default logo and a white version for the sticky header). However, in Helix Ultimate, there isn’t a built-in option to assign a separate logo specifically for the sticky state — that’s why you only see one logo.svg in the preset.

You can still achieve a similar result using CSS, but it depends on how your SVG is structured:

Option 1: If your SVG supports CSS coloring

If your SVG elements use fill="currentColor" (or no hardcoded fill), you can change the color via CSS like this:

/* Default logo color */
.header .logo svg {
  color: #000;
}

/* Sticky header logo color */
.header-sticky .logo svg {
  color: #fff;
}

Important Note

If your SVG has fixed colors (e.g., fill="#000"), CSS won’t override them. In that case, you’ll need to edit the SVG file and replace those fills with currentColor.

Option 2: Using two logos (alternative approach)

If modifying the SVG is not giving the expected result, the safer approach is: • Use your default logo normally • Add a second (white) logo using CSS and switch visibility when the header becomes sticky

Thanks