DESARROLLO WEB

Cómo crear un Navbar Responsive solo con HTML y CSS

Tutorial paso a paso

Crea un menú de navegación responsive profesional con HTML y CSS. Aprende Flexbox, Media Queries y el truco del Checkbox Hack para móviles, sin una sola línea de JavaScript.

1

Navbar Responsive con Checkbox Hack

Creamos la estructura HTML de la barra de navegación. El truco principal aquí es el uso de un input checkbox oculto (#nav-check) vinculado al label (.nav-toggle). Esto nos permite controlar el estado del menú (abierto o cerrado) en dispositivos móviles utilizando únicamente CSS, sin necesidad de escribir JavaScript.

<nav class="navbar"> 
  
  <div class="logo">MiLogo</div> 
  
  <input type="checkbox" id="nav-check"> 
  <label for="nav-check" class="nav-toggle"> 
      <i class="fa-duotone fa-solid fa-bars"></i> 
  </label>
  
  <ul class="nav-links"> 
    <li><a href="#">Inicio</a></li> 
    <li><a href="#">Servicios</a></li> 
    <li><a href="#">Contacto</a></li> 
  </ul>
</nav>
2
Diagrama de estructura de navbar con checkbox hack
Esquema lógico del 'Checkbox Hack': el input oculto interactúa con el label visible para activar el despliegue del menú de enlaces.
<nav class="navbar"> 
  
  <div class="logo">MiLogo</div> 
  
  <input type="checkbox" id="nav-check"> 
  <label for="nav-check" class="nav-toggle"> 
      <i class="fa-duotone fa-solid fa-bars"></i> 
  </label>
  
  <ul class="nav-links"> 
    <li><a href="#">Inicio</a></li> 
    <li><a href="#">Servicios</a></li> 
    <li><a href="#">Contacto</a></li> 
  </ul>
</nav>
3

Integración de Font Awesome (CDN)

Vinculamos la librería mediante un enlace externo en la etiqueta <head>. Esto nos permite utilizar los íconos de navegación (fa-bars y fa-times) instantáneamente sin descargar archivos locales.

<link rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/css/all.min.css"
      integrity="sha512-..." 
      crossorigin="anonymous"
      referrerpolicy="no-referrer" />
4

Estilos CSS del Navbar en Modo Desktop

Analizamos el CSS de una barra de navegación típica de un sitio web: primero aplicamos un reseteo básico de estilos, luego damos forma al contenedor .navbar (colores, alineación y espaciado), estilizamos el logo, organizamos los enlaces del menú en una fila horizontal y dejamos preparado el checkbox y el botón hamburguesa que más adelante usaremos para la versión responsive en mobile.

/* --- Reseteo básico --- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
/* --- Estilos Generales del Navbar (Modo Desktop por defecto) --- */
.navbar {
             background-color: #2c3e50; /* Color de fondo oscuro */
             color: #ecf0f1; /* Color de texto claro */
             display: flex;
             justify-content: space-between;
             align-items: center;
             padding: 16px 32px;
}
.logo {
    font-size: 24px;
    font-weight: bold;
}
/* Estilos de la lista de links */
.nav-links {
    list-style: none;
    display: flex; /* En desktop se muestran en fila horizontal */
    gap: 24px; /* Espacio entre los links */
}
/* --- ELEMENTOS DEL HACK (Ocultos en Desktop) --- */
/* El checkbox SIEMPRE debe estar oculto. Es el motor invisible. */
#nav-check {
    display: none;
}
/* El botón hamburguesa (label) oculto en pantallas grandes */
.nav-toggle {
    display: none;
    font-size: 18px;
    cursor: pointer;
}
Publicidad
html-css-online-course-responsive-web-design-from-scratch

Aprendé desde cero con clases 100% en vivo, grupos súper reducidos y acompañamiento real. Todo el contenido está diseñado y dictado por el creador de la plataforma, para que aprendas de verdad, sin videos fríos ni cursos masivos.

Curso de HTML y CSS para Frontend

Dominá las bases de la programación frontend: estructura con HTML, estilos modernos con CSS y diseño rápido con Tailwind para lanzar tus primeros sitios responsivos y profesionales.10 clases en vivo con profesores expertosVer próximas fechas
6

Anatomía CSS: La Versión Desktop

Analizamos visualmente cómo cada bloque de CSS afecta el diseño final. Observa cómo usamos Flexbox para la distribución horizontal y cómo los elementos del menú hamburguesa se mantienen ocultos en esta resolución

Guia visual de la navbar en modo desktop
Desglose visual de la arquitectura CSS: distribución mediante Flexbox y ocultamiento estratégico de los controles móviles para pantallas grandes.
7

Navbar responsive con CSS: media queries y menú hamburguesa

Diapositiva del curso donde vemos cómo usar media queries y el “checkbox hack” en CSS para convertir un navbar clásico en un menú hamburguesa responsive para móviles y tablets.

/* =====================================================
   MEDIA QUERY para dispositivos móviles y tablets
   (Aplica estilos cuando el ancho de la pantalla es
   menor o igual a 768px)
===================================================== */
@media (max-width: 768px) {

    /* Ajustamos la altura del navbar para pantallas pequeñas */
    .navbar {
        height: 60px;
    }

    /* Mostramos el botón hamburguesa (en desktop suele estar oculto) */
    .nav-toggle {
        display: block;
    }

    /* Menú de links en modo móvil: ocupa toda la pantalla, se posiciona fijo y entra animado desde la derecha */
    .nav-links {
        width: 100%;          /* El menú ocupa todo el ancho */
        position: fixed;      /* Se mantiene fijo aunque se haga scroll */
        height: 100%;         /* Ocupa todo el alto de la ventana */
        z-index: 1;           /* Se muestra por encima del contenido */
        top: 0;
        left: 800px;          /* Lo dejamos fuera de la pantalla a la derecha */
        flex-direction: column; /* Los elementos del menú se apilan verticalmente */
        text-align: center;
        margin-top: 60px;     /* Dejamos espacio para el navbar de arriba */
        padding-top: 40px;    /* Separación interior para que no quede pegado */
        background-color: #2c3e50;
        transition: 0.5s;     /* Animación suave al mostrar/ocultar el menú */
    }

    /* Cada link del menú ocupa todo el renglón para que sea más fácil de tocar con el dedo */
    .nav-links li a {
        padding: 10px;
        display: block; /* Todo el ancho del renglón es clickeable */
    }

    /* Checkbox Hack para abrir el menú: cuando #nav-check está marcado, movemos la lista a la vista */
    #nav-check:checked ~ .nav-links {
        left: 0px;  /* Movemos el menú a la vista (desde la derecha hacia adentro) */
    }
}
8

El Menú Móvil en Acción: Estados Cerrado y Desplegado con CSS puro

Una comparativa visual del funcionamiento de la barra de navegación responsive. A la izquierda, vemos el estado inicial con el botón hamburguesa. A la derecha, mostramos cómo la interacción despliega los enlaces a pantalla completa utilizando la técnica del CSS Checkbox Hack, sin necesidad de JavaScript.

Guia visual de la navbar en modo movil
Comparativa de estados móviles: el botón hamburguesa inactivo (izquierda) vs. el menú desplegado a pantalla completa tras la interacción (derecha).

Lección anterior

Ejes, gradientes y transformaciones aplicadas a elementos CSS
Los efectos visuales en CSS se basan en ejes, fondos y transformaciones.

Efectos visuales y movimiento con CSS

Aprende a manejar el espacio visual con ejes, aplicar gradientes, transformar y animar elementos. Crea interfaces modernas y dinámicas con efectos visuales profesionales en CSS.

Comenzar Lección

Lección actual

Diseño de barra de navegación responsive mostrándose en laptop y celular con menú hamburguesa
Vista previa del proyecto final: una barra de navegación que conserva su estética en escritorio y transforma su funcionalidad en móviles mediante CSS puro.

Cómo crear un Navbar Responsive solo con HTML y CSS

Crea un menú de navegación responsive profesional con HTML y CSS. Aprende Flexbox, Media Queries y el truco del Checkbox Hack para móviles, sin una sola línea de JavaScript.

Lección actual

Lección siguiente

Resultado final del carrusel
Carrusel infinito y responsive

Cómo crear un Carrusel Infinito y Responsive solo con HTML y CSS

Usarás animaciones fluidas, variables CSS y diseño adaptativo para lograr un resultado profesional sin JavaScript.

Comenzar Lección
¿Es posible crear un menú hamburguesa responsive sin usar JavaScript?VSí, utilizando el 'Checkbox Hack'. Se usa un input checkbox oculto y se controla la visibilidad del menú mediante selectores CSS (:checked) dependiendo de si el usuario ha pulsado el label asociado.
¿Qué es el 'Checkbox Hack' en CSS y cómo funciona?VEs una técnica que aprovecha el estado ':checked' de un input invisible. Al vincularlo con un '<label>', el clic en el label activa el checkbox, permitiendo usar CSS para mostrar u ocultar el menú adyacente.
¿Por qué usar Flexbox para una barra de navegación?VFlexbox facilita la alineación vertical de elementos, la distribución del espacio entre el logo y los enlaces, y permite reordenar elementos en versiones móviles sin cambiar el HTML.
¿Afecta al SEO no usar JavaScript en el menú?VPositivamente. Los menús CSS puros son más ligeros, mejoran el tiempo de carga (LCP) y facilitan el rastreo de los enlaces por parte de los bots de Google.
¿Qué breakpoint o media query es ideal para móviles?VGeneralmente `max-width: 768px` cubre la mayoría de tablets en vertical y teléfonos. Sin embargo, depende de la cantidad de elementos en tu menú; a veces es necesario subir a 992px.
¿Cómo integro iconos de hamburguesa sin imágenes?VUsando librerías como Font Awesome (vía CDN) o insertando código SVG directamente en el HTML. Esto permite cambiar su color y tamaño con CSS.
¿Es compatible este método con todos los navegadores?VSí, funciona en todos los navegadores modernos (Chrome, Firefox, Safari, Edge) e incluso en versiones antiguas de IE que soporten el selector adyacente y pseudo-clases básicas.
¿Cómo animar la apertura del menú móvil?VAplicando `transition` a las propiedades que cambian (como `left`, `height` o `opacity`). Por ejemplo: `transition: left 0.5s ease;` crea un efecto de deslizamiento.
¿Por qué mi menú no se abre al hacer clic?VVerifica que el atributo 'for' del '<label>' coincida exactamente con el 'id' del '<input checkbox>'. Si no son iguales, el clic no activará el estado 'checked'.
¿Este código sirve para proyectos profesionales?VAbsolutamente. Es ideal para landing pages, sitios corporativos y portafolios donde se busca máximo rendimiento y mínimo mantenimiento de código.