Ayuda para destacar ítem en menú superior

Topic summary

Un usuario solicita ayuda para destacar en color rojo el ítem “Elige tu Regalo!” en el menú superior de su tienda Shopify (www.dogdynasty.cl), que utiliza el tema Supply.

Problema inicial:

  • El código CSS agregado al archivo theme.scss.liquid no funcionaba.

Solución proporcionada:

  • Se recomendó borrar el código inicial y agregar un fragmento CSS específico al final de theme.scss.liquid.
  • La primera solución funcionó visualmente pero causó un efecto secundario: todos los segundos ítems de todos los menús se volvieron rojos.

Resolución final:

  • Se proporcionó un código CSS corregido dirigido específicamente a #AccessibleNav y #MobileNav con selectores nth-child(2) para aplicar el estilo solo al elemento deseado.
  • El problema se resolvió exitosamente tras implementar la segunda versión del código.
Summarized with AI on November 19. AI used: claude-sonnet-4-5-20250929.

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 :thinking:

//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 :slightly_smiling_face:

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.

1 Like

Funcionó perfecto! Muchas gracias :blush:

Mentira jajaj… todos los segundos ítems de todos los menús ahora son rojos :sweat_smile:

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.

1 Like

Ahora si! Muchísimas gracias :blush: