Hola @pedroauto96 y @silvia94,
Efectivamente, @silvia94 ha dado en el clavo con el tema del chevron y el responsive. El enfoque en custom.css es el correcto para no tocar los archivos del tema padre. Para lograr el estilo de píldora y un chevron moderno, podemos usar un SVG inyectado directamente en el CSS para el ::before, y ajustar los estilos para que las migas de pan se vean redondeadas y se envuelvan correctamente en dispositivos móviles. También añadiré un sutil efecto hover para mejorar la UX.
Aquí tienes el código CSS que puedes añadir o reemplazar en tu themes/classic/assets/css/custom.css:
.breadcrumb {
display: flex;
flex-wrap: wrap;
padding: 0.5rem 1rem; /* Ajustamos el padding para un look más compacto */
margin-bottom: 1.5rem;
background-color: #f8f9fa;
border-radius: 25px; /* Esto le da la forma de píldora */
align-items: center;
box-shadow: 0 2px 4px rgba(0,0,0,0.05); /* Sutil sombra para destacarlo */
}
Explicación de los cambios:
.breadcrumb: Aumentamos el border-radius a 25px para el estilo de píldora global. Añadí un box-shadow ligero para darle más presencia. align-items: center; asegura que todos los elementos estén bien alineados verticalmente..breadcrumb-item: Cada ítem individual también tiene su propio border-radius de 20px para ese aspecto redondeado. El transition es para el efecto hover. white-space: nowrap; es clave para que los nombres de categorías no se rompan dentro de un solo ítem, y margin: 0.125rem 0; proporciona un pequeño espacio cuando se envuelven en varias líneas..breadcrumb-item + .breadcrumb-item::before: Aquí sustituimos el / por un SVG de chevron directamente en el content. Esto es muy versátil y no requiere cargar fuentes externas. El fill="%236c757d" define el color del chevron, que puedes cambiar. line-height: 1; ayuda a centrarlo verticalmente..breadcrumb-item:hover: Añadimos un background-color semitransparente para un efecto visual al pasar el ratón.
Con estos cambios, las migas de pan deberían verse mucho más modernas y comportarse mejor en responsive. Asegúrate de limpiar la caché de PrestaShop después de aplicar los cambios para verlos reflejados.