Outline / border button navbar shopify || Contorno o borde para boton en la barra de navegacion

Español Debates Discusión general

Topic summary

Un usuario busca agregar un borde/contorno a un botón específico en la barra de navegación de su tienda Shopify usando el tema Dawn.

Solución proporcionada:

  • Se compartió código CSS personalizado para crear el contorno:
    nav.header__inline-menu ul.list-menu li:nth-child(X) {
  border-style: solid;
}
  • El número X debe reemplazarse según la posición del elemento en el menú (ej: 2 para el segundo elemento)
  • El código se implementa en Tienda online > Temas > Personalizar > Configuración del tema > CSS personalizado

Personalizaciones adicionales solicitadas:

  • Esquinas redondeadas y grosor: Se agregaron propiedades border-radius: 15px y border-width: 2px
  • Eliminar línea de subrayado: El usuario logró ocultarla en algunos botones
  • Problemas de alineación: Los botones “descargables” y “escríbenos” quedaron desalineados tras aplicar el código

Solución para alineación:

  • Usar position: relative y bottom: 3px para ajustar verticalmente
  • Aplicar margin-left: 12px para corregir el espaciado horizontal

Se sugirió contactar a un Shopify Partner o al Centro de Ayuda si se requiere asistencia profesional para implementaciones más complejas.

Summarized with AI on November 10. AI used: claude-sonnet-4-5-20250929.
7

Hola, @Clicomy :

Gracias por la respuesta. Por una parte, veo que finalmente has conseguido ajustar el diseño de los elementos “inicio” y “planes” del menú de tu tienda para eliminar el subrayado. Dime, ¿podrías confirmarme si finalmente estos elementos se muestran con el diseño que deseas en tu página web?

Por otra parte, en relación con la alineación del elemento “escríbenos” con el resto de líneas del menú; me alegra informarte de que, en efecto, puedes usar el código CSS para cambiar la posición de la sección que desees. Te dejo un enlace con más información sobre cómo funciona la posición CSS. En este caso, puedes añadir elementos para especificar una posición relativa y ajustar los píxeles de alineación:

position: relative;> > bottom: 3px;

Además, también puedes hacer uso de las propiedades de márgenes CSS para personalizar el espaciado o márgenes de cada uno de los elementos. Esta propiedad concreta te permite añadir espacios alrededor del elemento que estás personalizando. Te dejo un ejemplo de la propiedad que debes añadir:

margin-left: 12px;

Nota: Puedes modificar la cantidad total de píxeles para ajustar la alineación de la posición y márgenes con el fin de que se ajuste a tus necesidades de diseño. Puedes añadir estas propiedades al código que ya has implementado en Tienda online > Temas > Personalizar > CSS Personalizado. Este debería quedar así:

nav.header__inline-menu ul.list-menu li:nth-child(XXXXXXXX) {> > border-style: solid;> > border-radius: 15px;> > border-width: 2px;> > position: relative;> > bottom: 3px;> > margin-left: 12px;> }

Dicho esto, para cuestiones de implementación de diseños concretos, he de informarte de que contamos con un equipo de especialistas. Si cumples con la política de diseño, puedes escribirnos a través del Centro de Ayuda para solicitar cambios que requieran código que ayuden a mejorar el diseño de tu tienda. Alternativamente, también puedes contratar a un Partner de Shopify para este fin. Dime, ¿podrías confirmarme si con estas propiedades CSS que te comparto consigues el diseño deseado?