Header

Topic summary

A user wants to implement a dynamic header design with three states:

Desired behavior:

  • Default state: Transparent header with white text and white logo
  • On hover: Header background turns white while logo remains unchanged
  • On scroll: Header becomes white, text changes to black, and logo switches to an alternate version

The user references Dolce & Gabbana’s website as an example and includes three screenshots demonstrating each state.

Current situation:

  • Using the “Feather” theme
  • Theme customization options don’t support this functionality natively

Resolution:
A moderator confirms this requires custom code implementation to achieve the desired effect. The discussion remains open with no specific solution provided yet.

Summarized with AI on November 1. AI used: claude-sonnet-4-5-20250929.

i want first of all, transparent header in which all texts are white and logo also, 2nd = i want a header to be white on pointing the mouse, logo remains same but while scrolling texts converst into black colour also logo change ,

like this please see below photos, 1st= Actuall , 2nd= while pointing , 3rd= while scrolling,

for more please vist Dolce&Gabbana,

https://www.dolcegabbana.com/en-it/

1 Like

@sumairabilal oh sorry for any issue can you please check your theme customization header option maybe allow this if not so it can be done some customization code

Theme name is feather and didn’t allow such settings,

@sumairabilal oh sorry so it can be done some customization code