Botón añadido al nav para abrir y cerrar el menú

[salamandradevs.site/.git] / themes / droda / assets / css / main.css

diff --git a/themes/droda/assets/css/main.css b/themes/droda/assets/css/main.css
index 18140ad57849aeaf351da5d7557dd4adc1156e64..52014616a6683b68a54d97f082b6ec275664774c 100644 (file)
--- a/themes/droda/assets/css/main.css
+++ b/themes/droda/assets/css/main.css
@@ -100,16 +100,32 @@ aside .item {
 }
 
 nav {
+   display: flex;
+   justify-content: space-between;
+   align-items: center;
    grid-area: navbar;
    background-color: var(--bgColorDark);
    width: 100%;
 }
 
-nav ul {
+nav div:first-child {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: flex-start;
+   width: 100%;
+   margin-left: 1rem;
+}
+
+nav div img:first-child {
+   width: 3rem;
+}
+
+nav ul {
+   display: flex;
+   flex-flow: row nowrap;
+   align-items: center;
+   justify-content: flex-end;
    list-style-type: none;
    width: 100%;
    height: 100%;
@@ -220,6 +236,29 @@ footer {
    margin: 0 auto;
 }
 
+.boton-movil {
+   display: flex;
+   position: relative;
+   width: 4rem;
+   height: 4rem;
+   right: 0.4rem;
+
+   background-image: url('../images/menu.png');
+   background-color: transparent; /* Cuando usamos background-image se pone el background-color en blanco por default por eso le indicamos que sea transparente para que se pueda ver la imagen. */
+   background-position: top left;
+   background-repeat: no-repeat;
+   background-size: cover;
+
+   border: none;
+
+   transition: background-image ease 0.2s;
+
+}
+
+.boton-movil[data-visible="true"] {
+   background-image: url('../images/menu-abierto.png');
+}
+
 @media screen and (min-width: 780px) {
    :root {
       --globalScale: 1.5;
@@ -236,6 +275,11 @@ footer {
    aside {
       display: flex;
    }
+
+   .boton-movil {
+      display: none;
+   }
+   
 }
 
 @media screen and (min-width: 1280px) {