Ancien header toujours pris en compte

Shopify Discussion
1

Bonjour,

J’utilise le thème Horizon sur Shopify. J’ai rendu mon header transparent sur toutes les pages.

Mon problème : quand je scrolle vers le bas, les couleurs du texte du menu s’inversent (passent de blanc à noir). Je pense que c’est parce que l’ancien header (qui était beige avant que je le rende transparent) est toujours pris en compte par le thème même s’il est invisible — notamment via transparent='not-sticky' et data-sticky-state='active'.

Je veux que :

  • Le texte soit blanc quand le fond de la page est foncé
  • Le texte soit noir quand le fond de la page est clair
  • Mais que les couleurs ne changent PAS au scroll à cause de l’ancien header invisible

Est-ce que quelqu’un sait comment empêcher le header sticky invisible d’influencer les couleurs du texte au scroll ?

Merci !

2

Hi @lcrptt12mo

Welcome to the Shopify Community! Please share your store URL and password (if it’s password-protected), so I can check and provide you with the exact solution.

Best regards,
Devcoder :laptop:

3

Hey @lcrptt12mo ,

Il semble que ce soit le header sticky qui applique un autre jeu de couleurs lorsqu’il devient actif, plutôt que la transparence elle-même qui soit à l’origine du problème.

Pourriez-vous partager l’URL de votre boutique ainsi que le mot de passe (si elle est protégée) ? Par ailleurs avez-vous rendu le header transparent en utilisant les paramètres du thème Horizon, ou bien avec du CSS ou du JavaScript personnalisé ?

Si cela a été fait avec du CSS personnalisé, il est possible que l’état sticky (data-sticky-state=“active”) applique toujours ses propres styles de couleur au texte. Cela expliquerait pourquoi les éléments du menu passent du blanc au noir lorsque vous faites défiler la page.

Pouvoir inspecter la boutique et comprendre comment la transparence a été mise en place permettra d’identifier plus facilement la cause exacte du problème et de vous proposer la bonne solution.

Merci d’avance !

4

Hi @lcrptt12mo ,

This behavior is usually controlled by the theme’s header color scheme settings rather than the transparency itself. Horizon may switch between different header states initial and sticky and apply separate styling for each state.

I would recommend checking whether the sticky header has its own color scheme configured in the theme editor. If both header states are using different schemes, the text colors can change automatically when scrolling.

If the settings are correct, inspecting the sticky header CSS variables or color scheme classes should help identify what is overriding the menu text color.

Hope this helps point you in the right direction.

Thank You !