Update style.css

css/style.css

@@ -1256,4 +1256,58 @@
         font-size: 24px;
         color: white;
         cursor: pointer;
-    }
+    }
+
+    /* Estilo básico de la barra de navegación */
+.topnav {
+    display: flex;
+    flex-direction: column;  /* Siempre vertical */
+    align-items: flex-start;  /* Alineación a la izquierda */
+    background-color: #333;
+    padding: 10px;
+}
+
+.topnav a {
+    color: white;
+    text-decoration: none;
+    padding: 8px 16px;
+    display: block;  /* Aseguramos que los enlaces ocupen todo el ancho */
+}
+
+/* Ocultamos el icono de menú en pantallas grandes */
+.icon {
+    display: none;
+    font-size: 24px;
+    color: white;
+    cursor: pointer;
+}
+
+/* Media query para pantallas pequeñas (650px o menos) */
+@media (max-width: 650px) {
+    /* Los enlaces siempre deben estar apilados verticalmente */
+    .topnav {
+        width: 100%;  /* Aseguramos que la barra ocupe todo el ancho */
+    }
+
+    /* Los enlaces están ocultos por defecto en pantallas pequeñas */
+    .topnav a {
+        display: none; /* Ocultamos los enlaces inicialmente */
+        text-align: center;
+        padding: 10px;
+        width: 100%;
+        border-top: 1px solid #444;
+    }
+
+    /* Mostramos los enlaces cuando se activa la clase 'responsive' */
+    .topnav.responsive a {
+        display: block; /* Mostramos los enlaces como bloques */
+    }
+
+    /* Mostramos el icono hamburguesa en pantallas pequeñas */
+    .icon {
+        display: block; /* El icono de hamburguesa se muestra */
+        padding: 10px;
+        font-size: 30px;
+        text-align: right; /* Alineamos el icono a la derecha */
+    }
+}