Encabezado transparente y al desplazar con fondo

Topic summary

Un usuario está personalizando el tema Dawn 15.0.2 para lograr un encabezado transparente que cambie a fondo de color al hacer scroll. Problema principal: Cuando se abre el menú móvil en la parte superior de la página, el encabezado permanece transparente en lugar de mostrar el fondo de color.

Solución propuesta: MaverickStudio proporcionó código CSS para base.css que:

  • Aplica fondo de color cuando el menú está abierto (.menu-open)
  • Cambia los iconos SVG a negro al hacer scroll o abrir menú
  • Invierte el color del logo usando filter: invert(1)

Nuevo problema reportado: Danalash implementó el código pero su logo desaparece porque se vuelve blanco (el logo original es negro). La solución de inversión de color no funciona correctamente para todos los casos.

Estado: El hilo permanece abierto con una solución parcial que necesita ajustes para manejar diferentes colores de logo.

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

Estoy creando mi tienda online, con el tema DAWN 15.0.2. He puesto este código para conseguir un encabezado transparente, y cuando se hace scroll se pone el fondo de color. Ahora necesito que cuando se abre el menú al inicio de la página, el encabezado también se ponga con fondo de color, como cuando se hace scroll.

Dejo por aquí el código que me ha servido para lograr ese efecto transparente al inicio de la página y el fondo a color al hacer scroll:

En theme.liquid, tras he añadido el código:

{% if template == ‘index’ %}

.section-header .header-wrapper { background: transparent; } #MainContent { margin-top: -130px; } .scrolled-past-header { background: #FAF6EE; top: 0px !important; }

{% endif %}

Este código es el único que me ha servido, el caso es que ahora necesito que el encabezado quede así cuando se abre el menú (Adjunto foto)

Y no que se ve así:

¿Sabéis algún código para lograr el efecto correcto, y que no salga el encabezado transparente cuando se abra el menú?

Como segundo paso, una vez consiga el primero que os he comentado: Si ya sabéis también como hacer que cambien tanto los iconos del encabezado como el logotipo de color, os lo agradecería :folded_hands:t4: , para que no quede así cuando tiene fondo:

Vaya, me gustaría que cuando se hace scroll, los elementos cambiase de color para que puedan verse correctamente, y no sigan de los mismos colores que cuando está el encabezado transparente.

Dejo enlace a la tienda por si me podeis ayudar: https://f03d67-a8.myshopify.com/

¡Muchas gracias de antemano!

Hola compañero @anamm !

Tengo una solución para ambos problemas. Agregue lo siguiente a base.css y vea la magia :slightly_smiling_face:

.menu-open.shopify-section-header-sticky {
	background: #faf6ee !important;
}
.menu-open.shopify-section-header-sticky svg,
.shopify-section-header-sticky.scrolled-past-header svg {
	color: black !important;
}
.menu-open.shopify-section-header-sticky .header__heading-logo,
.shopify-section-header-sticky.scrolled-past-header
	.header__heading-logo {
	filter: invert(1) !important;
}

Resultado

1 Like

He puesto el código que indicas para que el encabezado no salga transparente cuando despliegas el menú, el problema ahora es que mi logo desaparece ya que se pone en blanco (es una imágen negra)