Encabezado transparente y al desplazar con fondo

[anamm]

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 </head> he añadido el código:

{% if template == 'index' %}

<style>

.section-header .header-wrapper { background: transparent; }

#MainContent { margin-top: -130px; }

.scrolled-past-header { background: #FAF6EE; top: 0px !important; }

</style>

{% 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🙏🏽, 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!

[MaverickStudio · Accepted solution]

Hola compañero @anamm !

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

.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

[Danalash]

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)