Ayuda para destacar ítem en menú superior

[MDellafiori]

Hola!

Mi tienda está en www.dogdynasty.cl y lo que quisiera hacer es destacar "Elige tu Regalo!" de color rojo en el menú superior.

Estoy usando el tema Supply de shopify, y he intentado agregar este código al final de Tienda Online>Editar código>recursos>theme.scss.liquid, pero no pasa nada 🤔

//For Desktop

#Details-HeaderMenu-2 >summary.list-menu__item{

color: #fff;

}

#Details-HeaderMenu-2> .header__menu-item .icon-caret{

color: #fff;

}

#Details-HeaderMenu-2{

background:red;

}

//For Mobile

#Details-menu-drawer-menu-item-2{

background: red;

}

Saqué ese código de otra respuesta en Shopify.

Algo así quisiera lograr:

Agradezco de antemano su ayuda 🙂

[AlfredoMendoza · Accepted solution]

Hola @MDellafiori 

Para poder lograr eso haz lo siguiente:

1. Borra el código que agregaste a tu archivo theme.scss.liquid
2. Dentro del archivo theme.scss.liquid agrega el siguiente fragmento de código al final del archivo.

#navBar ul li:nth-child(2) {
  background-color: red;
  color: white;
}

Guarda los cambios y recarga tu página. Con el código anterior el estilo que quieres se vería igual tanto en vista móvil como en escritorio.

Saludos.

[AlfredoMendoza · Accepted solution]

Hola @MDellafiori 

Para poder lograr eso haz lo siguiente:

1. Borra el código que agregaste a tu archivo theme.scss.liquid
2. Dentro del archivo theme.scss.liquid agrega el siguiente fragmento de código al final del archivo.

#navBar ul li:nth-child(2) {
  background-color: red;
  color: white;
}

Guarda los cambios y recarga tu página. Con el código anterior el estilo que quieres se vería igual tanto en vista móvil como en escritorio.

Saludos.

[MDellafiori]

Funcionó perfecto! Muchas gracias 😊

[MDellafiori]

Mentira jajaj... todos los segundos ítems de todos los menús ahora son rojos 😅

[AlfredoMendoza · Accepted solution]

Hola @MDellafiori 

Tienes razón, disculpa por el problema:

Reemplaza el código anterior por el siguiente:

#AccessibleNav, #MobileNav{
   > li:nth-child(2) {
       background-color: red; color: white;
     }
}

Eso debería solucionar el problema en el resto de listas.
Saludos.

[MDellafiori]

Ahora si! Muchísimas gracias 😊