Cómo Crear una Barra de Navegación Móvil Responsive en Carrd (3 Métodos)

Una barra de navegación móvil responsive es una de las primeras cosas que querrás añadir si tu sitio de Carrd tiene más de una sección. Las opciones de cabecera integradas de Carrd funcionan bien en escritorio, pero no te dan un menú hamburguesa en pantallas pequeñas, algo imprescindible en cualquier sitio moderno.

Esta guía cubre tres enfoques: un embed con HTML/CSS personalizado (el más barato y con mayor control), los elementos nativos de Carrd (sin nada de código) y plugins de terceros (funciones listas para usar). Cada uno tiene sus pros y sus contras en coste, complejidad y flexibilidad. Si aún no te has decidido por Carrd, puedes leer nuestra reseña de Carrd.co o probarlo gratis abajo.

Algunos tutoriales de Carrd

Antes de entrar en materia, aquí tienes guías relacionadas de personalización de Carrd que combinan bien con una barra de navegación responsive:

• Añade una Cabecera Fija a Carrd hace que la barra de navegación permanezca visible al hacer scroll
• Añade un Menú Flotante a Carrd es un patrón de navegación diferente que merece la pena considerar
• Añade un Menú Lateral a Carrd es un diseño alternativo para sitios con mucha navegación
• Añade Desplazamiento Suave y Enlaces de Anclaje a Carrd combina directamente con enlaces de navegación basados en anclas

Qué necesitarás

¿Qué enfoque es el adecuado para ti?

Guía rápida de decisión. Elige el camino que mejor encaje con tu situación:

Método 1: Embed con HTML/CSS personalizado (navbar de Carrd basada en código)

Este es el enfoque que yo uso. Te da el máximo control sobre el comportamiento y el estilo del menú hamburguesa de Carrd, y solo necesita Pro Standard ($19/año). La contrapartida es que editas el HTML/CSS directamente.

Cómo funciona el truco del checkbox

El mecanismo de alternancia usa un checkbox oculto y un elemento <label>. Cuando haces clic en el label (con estilo de icono hamburguesa), se alterna el checkbox. El CSS apunta entonces al menú hermano mediante #menu-toggle:checked ~ .menu. El ~ es el combinador de hermanos general, es decir, “selecciona el .menu que es hermano posterior del checkbox marcado”.

Es un interruptor de CSS puro. No se necesita JavaScript para abrir y cerrar. El JS solo se encarga de cerrar el menú cuando haces clic en un enlace de navegación o en el botón de cierre.

El truco del checkbox es un patrón antiguo (tiene compromisos de accesibilidad que veremos más abajo), pero funciona de forma fiable en el entorno embed de Carrd, donde no es fácil inyectar un <button> con una gestión de estado ARIA adecuada.

Paso 1: Configura el contenedor

En el editor de Carrd, añade un elemento Container con 2 columnas. Repártelo aproximadamente en 25%/75%:

• Primera columna: Tu logo (un elemento Image o Text)
• Segunda columna: El widget embed (siguiente paso)

Elige un color de fondo para el contenedor que combine con el diseño de tu cabecera. Esto no afecta al código de la barra de navegación en sí.

Si tu sitio usa Section Breaks para dividir el contenido en “páginas” separadas, coloca este contenedor encima de un marcador Header para que se muestre en todas las secciones. De lo contrario, Carrd lo ocultará junto con su sección cuando un visitante haga clic en un enlace a otra.

Paso 2: Añade un widget embed

En la segunda columna, añade un elemento Embed. Llámalo algo como navbar-embed.

Paso 3: Añade el HTML, CSS y JavaScript

Abajo está el código completo actualizado. Corrige varios errores de la versión original, añade atributos de accesibilidad, usa una transición suave de max-height en lugar de display: none/block, y limita el reset de CSS para no romper los estilos integrados de Carrd.

<style>
  :root {
    --mbm-main-font: inherit;
    --mbm-font-size-base: 18px;
    --primary-color: #200eed;
    --secondary-color: #fff;
  }

  /* Scoped reset — only affects this nav and its children */
  .mbm-nav, .mbm-nav * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

  /* Navigation styling (desktop) */
  .mbm-nav {
    position: relative;
    color: var(--secondary-color);
    background-color: var(--primary-color); /* blue header */
    padding: 15px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    font-family: var(--mbm-main-font);
    font-size: var(--mbm-font-size-base);
  }

  .menu {
    list-style: none;
    display: flex;
  }

  .menu li a {
    display: block;
    color: var(--secondary-color);
    text-decoration: none;
    padding: 10px 15px;
    position: relative;
  }

  .menu li a::after {
    content: "";
    position: absolute;
    bottom: 2px;
    left: 50%;
    width: 0;
    height: 2px;
    background-color: var(--secondary-color);
    transition: width 0.3s ease-in-out;
  }

  .menu li a:hover::after {
    width: 100%;
    left: 0;
  }

  /* Hamburger styling */
  .hamburger {
    display: none;
    cursor: pointer;
  }

  .hamburger .bar {
    display: block;
    width: 25px;
    height: 3px;
    background-color: var(--secondary-color);
    margin: 5px 0;
  }

  /* Hide checkbox */
  #menu-toggle {
    display: none;
  }

  /* Close button — hidden by default */
  .close-button {
    display: none;
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
    background: none;
    border: none;
    font-size: 22px;
    line-height: 1;
    color: var(--secondary-color);
    cursor: pointer;
    z-index: 1001;
    padding: 5px;
  }

  /* Mobile styles */
  @media (max-width: 768px) {
    .hamburger {
      display: block;
    }

    .menu {
      position: absolute;
      width: 100%;
      top: 100%;
      left: 0;
      background-color: var(--primary-color);
      text-align: center;
      padding: 0;
      z-index: 999;
      flex-direction: column; /* not in a row — stacked vertically */
      max-height: 0;
      overflow: hidden;
      opacity: 0;
      visibility: hidden; /* closed menu can't be clicked or tabbed into */
      transition: max-height 0.4s ease-in-out, opacity 0.3s ease-in-out, padding 0.4s ease-in-out, visibility 0.4s;
    }

    .menu li {
      width: 100%;
    }

    .menu li a {
      padding: 15px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

    .menu li:last-child a {
      border-bottom: none;
    }

    /* Show menu when checkbox is checked */
    #menu-toggle:checked ~ .menu {
      max-height: 500px;
      padding: 20px 0;
      opacity: 1;
      visibility: visible;
    }

    /* Show close button + hide hamburger when open */
    #menu-toggle:checked ~ .close-button {
      display: block;
    }

    #menu-toggle:checked ~ .hamburger {
      visibility: hidden;
    }
  }
</style>

<nav class="mbm-nav" role="navigation" aria-label="Main navigation">
  <input type="checkbox" id="menu-toggle" />
  <label for="menu-toggle" class="hamburger" aria-label="Toggle menu">
    <span class="bar"></span>
    <span class="bar"></span>
    <span class="bar"></span>
  </label>
  <ul class="menu">
    <li><a href="#">Home</a></li>
    <li><a href="#about">About</a></li>
    <li><a href="#testimonials">Testimonials</a></li>
    <li><a href="#contact">Contact</a></li>
  </ul>
  <button type="button" class="close-button" aria-label="Close menu">×</button>
</nav>

<script>
  // Close menu when close button is clicked
  document
    .querySelector(".mbm-nav .close-button")
    .addEventListener("click", function () {
      document.getElementById("menu-toggle").checked = false;
    });

  // Close menu when a nav link is clicked
  document.querySelectorAll(".mbm-nav .menu a").forEach(function (link) {
    link.addEventListener("click", function () {
      document.getElementById("menu-toggle").checked = false;
    });
  });
</script>

Personalizar la barra de navegación

Referencia rápida para los cambios más comunes:

• Colores: Edita --primary-color y --secondary-color en el bloque :root
• Fuente: Define --mbm-main-font con un valor font-family (p. ej., 'Inter', sans-serif)
• Elementos del menú: Sustituye las entradas <li><a href="..."> por tus propios enlaces de sección
• Breakpoint: Cambia 768px en la media query @media para apuntar a otro ancho de pantalla
• Posición del desplegable: top: 100% en la regla .menu móvil mantiene el desplegable justo debajo de la barra. Cámbialo solo si quieres un desplazamiento
• Velocidad de transición: Cambia 0.4s en transition: max-height 0.4s ease-in-out

Si tus enlaces de navegación apuntan a secciones de la misma página, añade desplazamiento suave para los enlaces de anclaje de Carrd para una experiencia más pulida.

Notas de accesibilidad

Método 2: Elementos nativos de Carrd (navegación responsive sin código)

Si no quieres tocar nada de código, los elementos integrados de Carrd pueden hacer el trabajo. El truco está en usar los ajustes de Visibility para mostrar distintos elementos de navegación en escritorio y en móvil. En escritorio se muestra una fila de botones; en móvil, un icono hamburguesa que salta a una sección de menú a pantalla completa.

Cómo funciona

Carrd permite definir la visibilidad de los elementos por tipo de dispositivo. Creas dos versiones de tu navegación (una para escritorio y otra para móvil) y Carrd muestra la correcta según el tamaño de pantalla.

Configurar la navegación de escritorio

1. En tu contenedor de cabecera, añade un elemento Buttons
2. Pon Layout en Row (disposición horizontal de botones)
3. Pon Visibility en Desktop Only
4. Añade tus botones de navegación (Home, About, Contact, etc.). Cada uno enlaza a una sección con #section-name

Crear el botón hamburguesa para móvil

1. Añade un elemento Icon al mismo contenedor (elige un icono de hamburguesa/menú de la biblioteca de iconos de Carrd)
2. Pon la URL del icono en #menu (enlazará a una sección que crearás a continuación)
3. Pon Visibility en Mobile Only

Construir la sección del menú móvil

1. Añade un Section Break en el punto de la página donde quieras que aparezca el menú móvil. Etiquétalo como menu (esto crea el destino de anclaje #menu)
2. Dentro de esa sección, añade un elemento Buttons con Layout: Column (botones verticales)
3. Añade tus botones de navegación — los mismos enlaces que en la versión de escritorio
4. Añade un Icon de cierre (símbolo X) con su URL en browser:back — usa el tipo de URL integrado de Carrd para volver atrás en el historial del navegador, lo que efectivamente cierra el menú
5. Añade un Header Marker Control para que la cabecera de navegación aparezca en cada “página” de tu sitio de Carrd

Como referencia, Carrd admite estos tipos de URL en botones e iconos: #section-name, browser:back, section:next, section:previous y browser:top.

Hay una plantilla gratuita que implementa este enfoque: plantilla gratuita de navbar móvil para Carrd de Jason Leow (requiere Pro Plus).

Ventajas, inconvenientes y requisitos de plan

Ventajas:

• Nada de código — todo se edita visualmente en el builder de Carrd
• Los cambios se ven al instante en la vista previa del editor
• Sin dependencias externas

Inconvenientes:

• Requiere Pro Plus ($49/año) para los ajustes de Visibility
• Más pasos de configuración (7 pasos principales frente a 3 del enfoque con código)
• No es fijo (sticky) por naturaleza — requiere trabajo extra para mantenerse fijo al hacer scroll
• Sin animación de hamburguesa a X
• El cierre con browser:back puede ser poco fiable si el usuario llegó a la página desde un enlace externo

Para otro patrón de navegación sin código, consulta también cómo añadir un menú flotante a Carrd.

Método 3: Plugins de navegación para Carrd (sin código, funciones extra)

Si quieres una barra de navegación pulida sin escribir código y el enfoque nativo se te queda corto, los plugins de terceros llenan ese hueco. Son de pago, pero están bien mantenidos y diseñados específicamente para Carrd.

Plugin Nav Bar

El plugin Nav Bar de Jason’s Plugins añade un menú hamburguesa responsive a tu sitio de Carrd. Se encarga del botón móvil, el estilo y el diseño — tú solo configuras los elementos del menú. Funciona con Pro Standard ($19/año) más el coste del plugin.

Mega Nav Bar

Mega Nav Bar añade soporte para desplegables multinivel. Es excesivo para una navegación simple de 4 enlaces, pero si tu sitio de Carrd tiene muchas páginas o una jerarquía de información compleja, es la opción más limpia sin construirla tú mismo.

Plugin gratuito Visibility Control

El plugin Visibility Control es gratuito y usa una función JavaScript visCtrl() para mostrar/ocultar elementos nativos de Carrd según el dispositivo. En la práctica replica los ajustes de Visibility de Pro Plus en un plan Pro Standard — útil si quieres el enfoque del Método 2 sin pagar Pro Plus.

Otros plugins útiles de Carrd incluyen el plugin Carrd Tabs para contenido en pestañas y el plugin Carrd Accordion para secciones de FAQ.

Comparativa de métodos: ¿qué enfoque de navbar para Carrd es el adecuado para ti?

Mi recomendación: el Método 1 (código personalizado) si te sientes cómodo copiando y pegando HTML. Es el más barato, el más flexible y la única opción con hamburguesa animada. Usa el Método 2 si no quieres ver código y no te importa pagar Pro Plus. Usa el Método 3 si necesitas desplegables multinivel o prefieres un plugin mantenido.

Cómo hacer que tu navbar de Carrd sea fija (sticky)

El enfoque con código personalizado (Método 1) funciona con una cabecera fija. Si quieres que tu navbar permanezca fijada en la parte superior del viewport mientras los usuarios hacen scroll, sigue el tutorial de cabecera fija para Carrd.

El enfoque nativo (Método 2) no admite posicionamiento fijo de forma nativa — necesitarías CSS personalizado adicional, lo que en cierto modo anula el propósito del enfoque sin código.

Solución de problemas comunes de la navbar móvil en Carrd

document.addEventListener("DOMContentLoaded", function () {
  document
    .querySelector(".mbm-nav .close-button")
    .addEventListener("click", function () {
      document.getElementById("menu-toggle").checked = false;
    });

  document.querySelectorAll(".mbm-nav .menu a").forEach(function (link) {
    link.addEventListener("click", function () {
      document.getElementById("menu-toggle").checked = false;
    });
  });
});

Prueba tu navbar responsive de Carrd

Preguntas frecuentes

Más personalizaciones de Carrd

Si estás ampliando tu sitio de Carrd más allá de la navbar, estas guías cubren otras adiciones comunes:

• Añade un Botón de Volver Arriba en Carrd
• Añade un Aviso de Cookies a Carrd
• Añade una Tabla de Precios a Carrd
• Añade una Ventana Modal Emergente a Carrd
• Añade un Alternador de Modo Oscuro a Carrd
• Añade un Slider de Testimonios a Carrd
• Añade un Botón de Chat de WhatsApp a Carrd
• Añade Estilos de Cuenta Regresiva a Carrd
• Añade un Dominio Personalizado a Carrd