3 files changed, 43 insertions, 23 deletions
diff --git a/src/js/navbar-burger.js b/src/js/navbar-burger.js
deleted file mode 100644
index 084f02b..0000000
--- a/src/js/navbar-burger.js
+++ /dev/null
@@ -1,23 +0,0 @@
-document.addEventListener('DOMContentLoaded', () => {
-    // Get all "navbar-burger" elements
-    const $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll('.navbar-burger'), 0);
-
-    // Check if there are any navbar burgers
-    if ($navbarBurgers.length > 0) {
-
-        // Add a click event on each of them
-        $navbarBurgers.forEach( el => {
-            el.addEventListener('click', () => {
-
-                // Get the target from the "data-target" attribute
-                const target = el.dataset.target;
-                const $target = document.getElementById(target);
-
-                // Toggle the "is-active" class on both the "navbar-burger" and the "navbar-menu"
-                el.classList.toggle('is-active');
-                $target.classList.toggle('is-active');
-
-            });
-        });
-    }
-});
diff --git a/src/scss/custom/_header.scss b/src/scss/custom/_header.scss
index 5b1e012..25ae9cd 100644
--- a/src/scss/custom/_header.scss
+++ b/src/scss/custom/_header.scss
@@ -5,6 +5,27 @@
     display: none;
 }
 
+.nav__toggle {
+    position: absolute;
+    cursor: pointer;
+    margin: 0 1rem;
+    right: 0;
+}
+
+.nav__toggle svg {
+    width: 1rem;
+    fill: white;
+}
+
+.nav__toggle .close {
+    display: none;
+}
+
+.nav__toggle .close,
+.nav__toggle .menu {
+    margin: 1rem auto;
+}
+
 label[for=navbar-toggle-cbox] {
     cursor: pointer;
 }
@@ -13,6 +34,14 @@ label[for=navbar-toggle-cbox] {
     display: block;
 }
 
+#navbar-toggle-cbox:checked ~ .navbar-brand label.nav__toggle svg.close {
+    display: block;
+}
+
+#navbar-toggle-cbox:checked ~ .navbar-brand label.nav__toggle svg.menu {
+    display: none;
+}
+
 /*- ----------- End Menu Mobile sin JS ------------- */
 /* navigation */
 
diff --git a/src/scss/custom/_mediaqueries.scss b/src/scss/custom/_mediaqueries.scss
index 47c319c..f66079f 100644
--- a/src/scss/custom/_mediaqueries.scss
+++ b/src/scss/custom/_mediaqueries.scss
@@ -4,6 +4,20 @@
     }
 }
 
+@media only screen and (min-width: 1087px) {
+  .nav__toggle {
+    display: none;
+  }
+
+  .nav__menu {
+    flex-direction: row;
+  }
+
+  .nav__menu li {
+    display: block;
+  }
+}
+
 @media screen and (max-width: 600px) {
     .main-content {
         padding: 0rem;