Color a un elemento del submenú desplegable

[nice_victor]

Hola, utilizo el theme refresh. Tengo un menú hamburguesa, al abrirlo se ven las categorías de producto y al pinchar en cualquiera sale otro menú, encabezado por "Ver Todos" y después el resto de subcategorías de producto (adjunto foto).

Me gustaría poder destacar ese primer link de cada submenú "Ver Todos" con el color de fondo #13A595 y la letra blanca. ¿Es posible? Muchas gracias!

[joseamayadev]

Entiendo que tu interés es modificar el CSS de tu sitio, y para ello es crucial identificar correctamente el selector CSS que necesitas ajustar. Una vez que tengas claro cuál es el selector adecuado, puedes proceder con los cambios.

Para aplicar CSS personalizado, sigue estos pasos en la interfaz de tu tema de Shopify: ve a 'Personalizar', luego selecciona 'Ajustes del tema' (representado por un icono de engranaje). Dentro de esta sección, busca una opción llamada 'Estilos personalizados'. Aquí puedes probar con el siguiente código CSS:

.menu-drawer__inner-submenu .menu-drawer__menu.list-menu li a { color: #fff; } .menu-drawer__inner-submenu { color: #13a595; }

Es importante mencionar que aunque este cambio no afectara la funcionalidad de tu tema, ten en cuenta que los nombres de los selectores pueden variar, especialmente tras una actualización del tema, como podría ser el caso con la actualización 'Refresh'. Espero que esta solución funcione correctamente para ti y recuerda que cualquier duda la pudes dejar en el foro para colaborarte. 

[nice_victor]

Hola Jose, muchas gracias por la ayuda. 

He probado el css que me has pasado, pero ahora todos los links del menú se ven blancos. A mi me gustaría que solo se cambiara el primer item de ese menú, el que pone "Ver Todos". 

Si pudiera ponerle el fondo #13a595 y las letras blancas a ese primer item solo, sería genial. 
(subo imagen de cómo me gustaría que se viera, lo he hecho en un programa de diseño, pero en la web no lo consigo).

En otra duda de la comunidad parecida, he encontrado este código:

#Details-menu-drawer-menu-item-1 .menu-drawer__menu-item,

#Details-menu-drawer-menu-item-1

  .menu-drawer__inner-submenu

  .menu-drawer__menu-item {

  background-color: #13a595;

  color: white;

}

Pero se aplica en el primer menú y no en el siguiente. Es decir, se me aplica en el menú principal (Aceites y Condimentos), no dentro del submenú de Aceites y complementos en el que el primer item sería "Ver Todo".

Mil gracias otra vez!

[joseamayadev · Accepted solution]

Para aplicar estilos a elementos específicos en una página, es esencial tener conocimientos básicos en el uso del inspector de elementos y en CSS. La clave está en entender cómo los selectores CSS te permiten modificar elementos específicos. Te sugiero practicar con el inspector de elementos del navegador para identificar los selectores adecuados. Observa cómo cambia el código cuando interaccionas con diferentes partes de la página.

Esto te ayudará a entender mejor la estructura y cómo aplicar los estilos necesarios.

Te dejo un código para que lo pruebes, puedes mejorar los colores y adaptarlo:

.menu-drawer__inner-submenu .menu-drawer__menu.list-menu li:first-of-type a {
  color: #fff;
  background: red;
}
.menu-drawer__inner-submenu {
  color: #13a595;
}

[nice_victor]

Muchísimas gracias José, ahora funciona a la perfección! 😄