Cómo Añadir una Cabecera Fija a Carrd (Tutorial de CSS)
Guía paso a paso para añadir una cabecera fija a tu sitio web de Carrd con CSS. Funciona en los planes Pro Standard y Pro Plus con código embed.
Actualizado Publicado 12 min de lectura
Una cabecera fija mantiene tu barra de navegación anclada a la parte superior de la pantalla mientras los visitantes hacen scroll. Es un patrón estándar en la mayoría de los sitios web, pero Carrd no tiene una opción integrada para activarlo. Tienes que añadirla tú mismo con un pequeño fragmento de CSS.
Esta guía te lleva paso a paso por todo el proceso. Necesitarás un plan Pro Standard ($19/año) o superior, ya que es el nivel más bajo que admite embeds de código personalizado.
Plugins y Temas para CarrdMás tutoriales de Carrd:
- Añadir un Aviso de Cookies a Carrd
- Cómo Añadir una Tabla de Precios a Carrd.co
- Reseña de Carrd.co
- Cómo Añadir Preguntas Frecuentes con Acordeón Desplegable a Carrd.co
- Cómo Añadir un Dominio Personalizado a Carrd.co
- Barra de Navegación Móvil Responsive en Carrd.co
La lista completa de plugins, temas y tutoriales de Carrd está en carrdme.com.
Requisitos previos
| Característica | Pro Standard ($19/año) | Pro Plus ($49/año) |
|---|---|---|
| Embeds de código personalizado | Sí | Sí |
| Definir IDs de elementos personalizados en los ajustes | No (usa Inspeccionar del navegador) | Sí (pestaña Advanced Settings) |
Ambos planes funcionan. La diferencia está en cómo encuentras el ID del contenedor — más sobre esto en el paso 2.
Cómo añadir una cabecera fija a Carrd
1. Pon el padding de la página a cero
Abre tu sitio de Carrd en el editor y haz clic en el elemento Page. En sus ajustes de apariencia, pon el padding vertical y horizontal a 0.
Si omites este paso, la barra de navegación fija tendrá un tamaño incorrecto y no se alineará con los bordes de la página.
2. Obtén el ID del contenedor
Los elementos de tu barra de navegación deberían estar dentro de un elemento Container. Necesitas el ID de ese contenedor para apuntarle con CSS.
Usuarios de Pro Plus: abre los ajustes del contenedor, ve a la pestaña Advanced Settings y define un ID personalizado (p. ej., navbar). Usa ese ID en el CSS de abajo.
Usuarios de Pro Standard: no puedes definir IDs personalizados, pero puedes encontrar el que se genera automáticamente. Abre tu sitio publicado, haz clic derecho en el contenedor de tu barra de navegación, elige Inspeccionar y busca un ID como container01 o container02 en el elemento <div>. El vídeo de arriba muestra este proceso en detalle.
3. Añade el código CSS
Añade un nuevo elemento Embed a tu sitio de Carrd. Pon su tipo en Code y su estilo en Hidden y Head. Luego pega uno de los fragmentos de abajo.
Fija en todos los tamaños de pantalla
<style>
#container01 {
position: fixed !important;
z-index: 99;
top: 0;
left: 0;
width: 100%;
margin-top: 0 !important;
}
</style>Fija solo en pantallas de más de 600px de ancho
<style>
@media screen and (min-width: 600px) {
#container01 {
position: fixed !important;
z-index: 99;
top: 0;
left: 0;
width: 100%;
margin-top: 0 !important;
}
}
</style>Sustituye #container01 por el ID real de tu contenedor.
Qué hace cada propiedad:
position: fixed— saca el elemento del flujo normal y lo fija al viewport.!important— sobrescribe los estilos de posicionamiento por defecto de Carrd.z-index: 99— mantiene la cabecera por encima del resto del contenido.top: 0; left: 0— lo ancla a la esquina superior izquierda.width: 100%— asegura que ocupe todo el ancho del viewport. Sin esto, la cabecera podría no cubrir la página entera.margin-top: 0 !important— Carrd añade espacio superior a todos los elementos excepto al primero de cada sección. Si tu contenedor de navegación no es el primero, ese espacio dejaría un hueco por encima de la barra fija.
4. Añade un espaciador debajo de la cabecera
Cuando aplicas position: fixed a un elemento, se elimina del flujo normal del documento. Esto significa que el contenido de debajo sube y queda oculto tras la barra de navegación.
Para arreglarlo, añade un elemento Divider justo después del contenedor de la cabecera. Ajusta su margen superior para que coincida aproximadamente con la altura de tu barra de navegación. Puedes configurarlo por separado para escritorio y móvil en los ajustes de apariencia del Divider.
Como alternativa, puedes añadir padding superior al siguiente contenedor bajo la cabecera, pero usar un Divider te da más control sobre el espaciado responsive.
5. Guarda y prueba
Publica los cambios y comprueba el resultado:
- ¿La cabecera permanece fija arriba al hacer scroll?
- ¿Ocupa todo el ancho de la página?
- ¿El contenido de debajo es visible (no queda oculto tras la cabecera)?
- En móvil (si usaste el fragmento responsive), ¿la cabecera se desplaza con normalidad?
Solución de problemas
La cabecera no ocupa todo el ancho: asegúrate de que left: 0 y width: 100% están en tu CSS. Comprueba también que el padding de la página está a 0 (paso 1).
El contenido queda oculto tras la cabecera: necesitas un espaciador. Añade un Divider con un margen superior adecuado, o añade padding-top al siguiente elemento.
La cabecera parpadea o salta al cargar: esto puede ocurrir si la animación de carga de página de Carrd entra en conflicto con position: fixed. La animación mueve la página con un transform de CSS, y un elemento fijo dentro de un padre transformado se mueve con él hasta que la animación termina. Desactiva la animación de carga en los ajustes del elemento Page.
La cabecera se superpone en móvil pero se ve demasiado alta: usa la versión con @media del CSS para desactivar el comportamiento fijo en pantallas pequeñas, o reduce el padding del contenedor en el diseño móvil.
El z-index no parece funcionar: prueba a aumentar el valor de z-index (p. ej., 9999). Si otros elementos siguen cubriendo la cabecera, comprueba en Inspeccionar si algún padre de tu contenedor tiene un transform o una opacity inferior a 1 (normalmente por una animación). Cualquiera de los dos atrapa el z-index de la cabecera dentro de ese padre.
Cuándo usar el Header Marker integrado de Carrd en su lugar
Carrd tiene un control nativo llamado Header Marker que hace visible una región de cabecera en cada sección. Si usas Sections y solo necesitas que la cabecera aparezca en todas las páginas (no que permanezca fija al hacer scroll), el Header Marker es la solución más sencilla — sin código personalizado.
Usa el enfoque del CSS fijo cuando quieras que la cabecera permanezca anclada en la parte superior del viewport mientras el visitante recorre un sitio largo de una sola página.
Ambos también se pueden combinar. En un sitio con Sections, un contenedor de navegación colocado dentro de una sección desaparece cuando el visitante cambia a otra sección, porque Carrd oculta las secciones inactivas. Coloca el contenedor de navegación en la región de cabecera (usando el Header Marker) y aplícale el CSS fijo, y permanecerá anclado en cada sección.
Carrd.co
