From ea446ab7d06e590cfca372859932f61ccd3713a2 Mon Sep 17 00:00:00 2001
From: Kazuma275 <sergioramosalarcon@gmail.com>
Date: Fri, 13 Dec 2024 14:05:14 +0100
Subject: [PATCH] Update style.css

---
 css/style.css | 56 ++++++++++++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 55 insertions(+), 1 deletion(-)

diff --git a/css/style.css b/css/style.css
index 2e82eb5..cc59067 100644
--- a/css/style.css
+++ b/css/style.css
@@ -1256,4 +1256,58 @@
         font-size: 24px;
         color: white;
         cursor: pointer;
-    }
\ No newline at end of file
+    }
+
+    /* 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 */
+    }
+}