---
title: "Cómo Crear una Barra de Navegación Móvil Responsive en Carrd (3 Métodos)"
description: "Aprende a crear una barra de navegación móvil responsive en Carrd con un menú hamburguesa. Cubre HTML/CSS personalizado, elementos nativos de Carrd y plugins. Incluye opciones sin código."
date: 2024-02-14
categories: ["web-development"]
tags: ["carrd","navbar","responsive-design"]
---

import Button from "@components/widgets/Button.astro";
import Notice from "@components/widgets/Notice.astro";
import ListCheck from "@components/widgets/ListCheck.astro";
import Accordion from "@components/widgets/Accordion.astro";
import Tabs from "@components/widgets/Tabs.astro";
import Tab from "@components/widgets/Tab.astro";

import YouTubeEmbed from "@components/widgets/YouTubeEmbed.astro";

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](/es/resena-carrd/) o probarlo gratis abajo.

<Button link="https://go.bitdoze.com/carrd" text="Prueba Carrd Gratis (Prueba Pro de 7 Días)" />

## 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:



<YouTubeEmbed
  url="https://www.youtube.com/embed/PkZ7CYfKxSg"
  label="Cómo Crear una Barra de Navegación Móvil Responsive en Carrd.co"
/>
- [Añade una Cabecera Fija a Carrd](/es/anadir-header-fijo-carrd/) hace que la barra de navegación permanezca visible al hacer scroll
- [Añade un Menú Flotante a Carrd](/es/menu-flotante-carrd/) es un patrón de navegación diferente que merece la pena considerar
- [Añade un Menú Lateral a Carrd](/es/menu-lateral-carrd/) es un diseño alternativo para sitios con mucha navegación
- [Añade Desplazamiento Suave y Enlaces de Anclaje a Carrd](/es/desplazamiento-suave-carrd/) combina directamente con enlaces de navegación basados en anclas

## Qué necesitarás

<Notice type="info" title="Planes de Carrd">
Los niveles de los planes de Carrd importan aquí. **Pro Standard** ($19/año) desbloquea el elemento Embed que necesitas para el Método 1. **Pro Plus** ($49/año) desbloquea los ajustes de Visibility para el Método 2. Los plugins del Método 3 funcionan con Pro Standard más el coste del plugin. Todos los planes de pago incluyen una **prueba gratuita de 7 días** sin tarjeta de crédito. Carrd también hace rebajas del 40% en Black Friday si quieres programar tu actualización.

Más información: [Planes y precios de Carrd](https://carrd.co/docs/pro/plans) | [Reseña completa de Carrd](/es/resena-carrd/)
</Notice>

| Plan | Precio | Sitios | Embeds | Ajustes de Visibility |
|---|---|---|---|---|
| Free | $0 | 3 | No | No |
| Pro Lite | $9/año | 3 | No | No |
| **Pro Standard** | **$19/año** | 10 | **Sí** | No |
| **Pro Plus** | **$49/año** | 25 | Sí | **Sí** |

<ListCheck>
<ul>
  <li>Una cuenta de Carrd (gratis para empezar)</li>
  <li>Pro Standard ($19/año) para los Métodos 1 y 3, o Pro Plus ($49/año) para el Método 2</li>
  <li>Un sitio de Carrd con al menos 2-3 secciones configuradas</li>
  <li>Un navegador con herramientas de desarrollo para probar la adaptabilidad</li>
</ul>
</ListCheck>

## ¿Qué enfoque es el adecuado para ti?

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

<Tabs>
<Tab name="Código Personalizado">
**Ideal para**: Control total, menor coste, hamburguesa con animación.

- **Plan necesario**: Pro Standard ($19/año)
- **Dificultad**: Media (copiar y pegar código, personalización mínima)
- **Lo que obtienes**: Hamburguesa que se convierte en un botón de cierre X, transición suave de apertura/cierre, control CSS completo, compatible con cabecera fija
- **Lo que no**: Los cambios requieren editar código, sin vista previa visual en el editor
</Tab>
<Tab name="Elementos Nativos">
**Ideal para**: Cero código, edición visual en el builder de Carrd.

- **Plan necesario**: Pro Plus ($49/año)
- **Dificultad**: Fácil-Media (más pasos, pero todo con clics)
- **Lo que obtienes**: Editas todo en el editor de Carrd, vista previa visual, sin código embed que gestionar
- **Lo que no**: Sin animación en el botón, no es fijo (sticky) por defecto, más pasos de configuración
</Tab>
<Tab name="Plugins">
**Ideal para**: Funciones extra como desplegables multinivel sin escribir código.

- **Plan necesario**: Pro Standard ($19/año) + coste del plugin
- **Dificultad**: Fácil (instalar y configurar)
- **Lo que obtienes**: Barras de navegación completas, menús multinivel, mantenidas por el autor del plugin
- **Lo que no**: Dependencia de un coste continuo, menos personalización que el código escrito a mano
</Tab>
</Tabs>

## 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`.

<Notice type="info" title="Consejo de Ubicación del Embed">
Carrd admite 4 opciones de ubicación del embed: **Inline** (por defecto, el código va donde está el elemento), **Hidden → Head** (el código va en el `<head>`), **Hidden → Body Top** y **Hidden → Body End**.

Para mejores resultados, divide tu código en dos embeds: pon el bloque `<style>` en un embed **Hidden → Head** (evita el destello de contenido sin estilo) y el HTML + JS en un embed **Inline**. Si prefieres mantenerlo simple con un solo embed, el enfoque Inline funciona. Es lo que usaba el tutorial original.

Consulta la [documentación de embeds de Carrd](https://carrd.co/docs/building/embedding-custom-code) para más detalles.
</Notice>

### 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.

<Tabs>
<Tab name="Código completo">

**Si usas dos embeds (recomendado):** Pon el bloque `<style>` en un embed Hidden → Head y el resto en un embed Inline. **Si usas un solo embed:** Pega todo lo siguiente en un único embed Inline.

```html
<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>
```

</Tab>
<Tab name="Explicación del código">

**Propiedades personalizadas de CSS** (bloque `:root`):
- `--primary-color`: Color de fondo del menú desplegable móvil
- `--secondary-color`: Color del texto y los iconos
- `--mbm-font-size-base`: Tamaño de fuente base de los elementos del menú
- Cámbialos para que combinen con el diseño de tu sitio

**Reset limitado** (`.mbm-nav, .mbm-nav *`):
El reset solo se aplica a este nav y a sus hijos, así que no alterará el espaciado de Carrd en otros elementos ni otros widgets `<nav>` de la página (como un menú flotante).

**Estilos de escritorio** (`.menu`, `.hamburger`):
En pantallas de más de 768px, el menú se muestra como una fila flex horizontal. La hamburguesa está oculta (`display: none`).

**Estilos móviles** (`@media max-width: 768px`):
- La hamburguesa se hace visible
- El menú pasa a un desplegable de ancho completo con `max-height: 0`, sin padding y con `visibility: hidden`, de modo que el menú cerrado no puede recibir toques ni el foco del teclado
- Cuando el checkbox está marcado (`#menu-toggle:checked ~ .menu`), `max-height` se expande a 500px con una transición suave
- El botón de cierre (×) ocupa el lugar de la hamburguesa en el lado derecho de la barra mientras el menú está abierto

**JavaScript**:
- Cierra el menú (desmarca el checkbox) al pulsar el botón de cierre o cualquier enlace de navegación
- Sin bibliotecas externas, sin dependencias

**Valores clave para ajustar**:
- `top: 100%` coloca el desplegable justo debajo de la barra de navegación, sea cual sea su altura. Cámbialo solo si quieres un hueco o un solapamiento
- `z-index: 999` mantiene el menú por encima de otros elementos
- Breakpoint de `768px`. Cámbialo si tu sitio necesita otro breakpoint móvil

</Tab>
</Tabs>

### 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](/es/desplazamiento-suave-carrd/) para una experiencia más pulida.

### Notas de accesibilidad

<Notice type="warning" title="Compromiso de Accesibilidad">
El truco del checkbox tiene limitaciones inherentes: no gestiona el foco correctamente y los lectores de pantalla pueden interpretar el label como un checkbox en lugar de un botón alternador. El código actualizado incluye `role="navigation"`, atributos `aria-label` y un elemento `<button>` de cierre. Esto ayuda, pero no resuelve por completo la limitación del truco del checkbox.

Para sitios en producción con requisitos estrictos de accesibilidad, considera un interruptor basado en `<button>` con JavaScript (difícil de lograr dentro de las restricciones del embed de Carrd) o usa el Método 2.

Para más contexto: [Requisitos de CSS y JavaScript para componentes accesibles, Smashing Magazine](https://www.smashingmagazine.com/2021/06/css-javascript-requirements-accessible-components/)
</Notice>

## 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.

<Notice type="info" title="Se Requiere Pro Plus">
Los ajustes de Visibility (Desktop Only / Mobile Only) requieren **Pro Plus**, a $49/año. Es la opción más cara, pero a cambio tienes cero código y edición totalmente visual en el builder de Carrd.
</Notice>

### 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](https://carrd.co/docs/building/url-types) 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](https://carrd.co/buy/190a78e4d1467cca) 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](/es/menu-flotante-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](https://navbar.carrd.co/) 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](https://plugins.carrd.co/#meganavbar) 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](https://visibility-control.carrd.co/) 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](https://go.carrdme.com/tabs) para contenido en pestañas y el [plugin Carrd Accordion](https://go.carrdme.com/accordion) para secciones de FAQ.

<Button link="https://carrdme.com/" text="Explora Plugins y Temas de Carrd" />

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

| Enfoque | Plan Requerido | Coste | Requiere Código | Vista Previa Visual | Soporte Sticky | Multinivel | Botón Animado |
|---|---|---|---|---|---|---|---|
| Código Personalizado (Método 1) | Pro Standard | $19/año | Sí | No | Sí (CSS manual) | Sí (manual) | Sí |
| Elementos Nativos (Método 2) | Pro Plus | $49/año | No | Sí | No (requiere trabajo extra) | No | No |
| Plugin Nav Bar (Método 3) | Pro Standard + plugin | $19/año + plugin | No | Limitada | Sí | No | Sí |
| Mega Nav Bar (Método 3) | Pro Standard + plugin | $19/año + plugin | No | Limitada | Sí | Sí | Sí |
| Visibility Control (gratis) | Pro Standard | $19/año | Mínimo (JS) | Sí | No | No | No |

**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](/es/anadir-header-fijo-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.

<Button link="https://go.bitdoze.com/carrd" text="¿Necesitas Carrd Pro? Empieza Aquí" />

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

<Accordion label="El menú aparece detrás de otros elementos (solución z-index)" group="troubleshooting" expanded="true">

El código usa `z-index: 999` en el elemento `.menu`. Si otros elementos de Carrd (contenedores, overlays u otros embeds) tienen valores de z-index más altos, el menú se renderizará detrás de ellos.

**Solución**: Aumenta el valor de z-index en el CSS de `.menu`. Prueba con `z-index: 9999`. Si no funciona, usa las herramientas de desarrollo de tu navegador (clic derecho → Inspeccionar) para encontrar el z-index del elemento que se superpone y pon el tuyo más alto.

</Accordion>

<Accordion label="El menú no se abre en iOS Safari" group="troubleshooting">

iOS Safari puede ser quisquilloso con el truco del checkbox. El elemento `<label>` que activa el checkbox a veces no registra bien los toques.

**Soluciones**:
- Añade `cursor: pointer` al label `.hamburger` (esto obliga a iOS a tratarlo como pulsable)
- Asegúrate de que ningún elemento padre tenga `overflow: hidden` que pueda recortar el área táctil
- Prueba en un dispositivo iOS real — la vista previa móvil de Carrd no detecta todas las particularidades de Safari

</Accordion>

<Accordion label="La posición del menú se rompe con la cabecera fija" group="troubleshooting">

El desplegable usa `position: absolute` con `top: 100%`, así que se ubica justo debajo del elemento `<nav>`. Si tu cabecera fija añade espacio extra debajo del nav (padding en el contenedor, por ejemplo), el desplegable puede verse despegado del borde inferior de la cabecera.

**Solución**: Cambia `top: 100%` por algo como `top: calc(100% + 20px)`, usando las herramientas de desarrollo del navegador para medir el hueco hasta que el desplegable quede justo debajo de la cabecera. Consulta el [tutorial de cabecera fija](/es/anadir-header-fijo-carrd/) para la configuración combinada.

</Accordion>

<Accordion label="Conflictos de CSS con los estilos integrados de Carrd" group="troubleshooting">

El código actualizado usa un reset limitado (`.mbm-nav, .mbm-nav *`) en lugar del selector universal `*` original, lo que debería evitar la mayoría de conflictos. Pero si sigues viendo problemas de espaciado en los elementos nativos de Carrd, puede que el CSS del embed se esté filtrando.

**Solución**: Comprueba si tu bloque `<style>` usa selectores universales. Si dividiste el CSS en un embed Hidden → Head separado, asegúrate de que todos los selectores estén limitados a `.mbm-nav` o a sus hijos. Evita apuntar a elementos globales como `body`, `html` o `*`.

</Accordion>

<Accordion label="El botón de cierre o los enlaces del menú no funcionan" group="troubleshooting">

Si el botón de cierre (X) no cierra el menú, o hacer clic en un enlace tampoco lo cierra, puede que el JavaScript se ejecute antes de que el DOM esté listo.

**Solución**: Envuelve el JS en un evento `DOMContentLoaded`:

```javascript
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;
    });
  });
});
```

Verifica también que el botón de cierre sea hijo directo de `<nav>` (no dentro de `<ul>`), como se muestra en el código actualizado.

</Accordion>

<Accordion label="Los elementos del menú no son pulsables en Android" group="troubleshooting">

Los navegadores antiguos de Android (anteriores a Chrome 90) a veces tienen problemas con el truco del checkbox combinado con el cambio `display: none/block`.

**Solución**: El código actualizado ya usa una transición de `max-height` en lugar de alternar `display`, lo que es más fiable en Android. Si sigues viendo problemas en dispositivos antiguos, añade `position: relative` y `z-index: 1` a los elementos `.menu li a`.

</Accordion>

## Prueba tu navbar responsive de Carrd

<Notice type="success" title="Consejo de Pruebas">
Prueba siempre en dispositivos reales. La vista previa móvil del editor de Carrd no detecta todos los casos extremos, especialmente las particularidades de iOS Safari y el comportamiento táctil de Android.
</Notice>

<ListCheck>
<ul>
  <li>Publica el sitio y pruébalo en un teléfono real (no solo en la vista previa móvil de Carrd)</li>
  <li>El botón hamburguesa abre Y cierra el menú</li>
  <li>Cada enlace del menú cierra el menú y navega a la sección correcta</li>
  <li>El botón de cierre (X) cierra el menú</li>
  <li>Redimensiona el navegador de escritorio de 1920px hasta 320px — verifica el breakpoint en 768px</li>
  <li>Prueba con la cabecera fija aplicada al mismo tiempo (si la usas)</li>
  <li>Prueba en iOS Safari, Chrome para Android y Chrome/Firefox de escritorio</li>
  <li>Ejecuta una auditoría de accesibilidad con Lighthouse — revisa las advertencias ARIA</li>
</ul>
</ListCheck>

## Preguntas frecuentes

<Accordion label="¿Necesito saber programar para añadir una navbar móvil a Carrd?" group="faq" expanded="true">
No. El Método 2 (elementos nativos de Carrd) y el Método 3 (plugins) no requieren nada de código. El Método 1 (embed personalizado) solo requiere copiar y pegar HTML/CSS en el elemento Embed de Carrd — no hace falta saber programar, solo seguir los pasos.
</Accordion>

<Accordion label="¿Qué plan de Carrd necesito para una navbar responsive?" group="faq">
Depende del método:
- **Método 1** (código personalizado): Pro Standard a $19/año — necesitas el elemento Embed
- **Método 2** (elementos nativos): Pro Plus a $49/año — necesitas los ajustes de Visibility
- **Método 3** (plugins): Pro Standard a $19/año + el coste del plugin

Todos los planes de pago incluyen una [prueba gratuita de 7 días](https://go.bitdoze.com/carrd) sin tarjeta de crédito.
</Accordion>

<Accordion label="¿Puedo usar esta navbar con una cabecera fija de Carrd?" group="faq">
Sí, pero funciona mejor con el Método 1 (código personalizado). El [tutorial de cabecera fija para Carrd](/es/anadir-header-fijo-carrd/) combina directamente con el enfoque de código personalizado — el desplegable usa `top: 100%`, así que sigue la altura de la barra de navegación y solo lo ajustas si tu cabecera añade espacio extra debajo del nav. El enfoque nativo (Método 2) no admite posicionamiento fijo sin CSS personalizado adicional.
</Accordion>

<Accordion label="¿Y los menús laterales para Carrd?" group="faq">
Si una barra superior no encaja en tu diseño, un menú de navegación lateral es otra opción. Funciona mejor en sitios con muchas secciones o con diseño tipo panel de control. Consulta [cómo añadir un menú lateral a Carrd](/es/menu-lateral-carrd/) para una guía paso a paso. También puedes explorar una [ventana modal emergente en Carrd](/es/ventana-modal-emergente-carrd/) para navegación tipo overlay.
</Accordion>

## 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](/es/boton-volver-arriba-carrd/)
- [Añade un Aviso de Cookies a Carrd](/es/anadir-aviso-cookies-carrd/)
- [Añade una Tabla de Precios a Carrd](/es/anadir-tabla-precios-carrd/)
- [Añade una Ventana Modal Emergente a Carrd](/es/ventana-modal-emergente-carrd/)
- [Añade un Alternador de Modo Oscuro a Carrd](/es/alternador-modo-oscuro-carrd/)
- [Añade un Slider de Testimonios a Carrd](/es/slider-testimonios-carrd/)
- [Añade un Botón de Chat de WhatsApp a Carrd](/es/boton-whatsapp-carrd/)
- [Añade Estilos de Cuenta Regresiva a Carrd](/es/estilos-cuenta-regresiva-carrd/)
- [Añade un Dominio Personalizado a Carrd](/es/anadir-dominio-carrd/)