Add navbar

The navbar is displayed on all pages, for smaller screensizes the menu
items are displayed in a burger menu.

1 files changed, 24 insertions, 0 deletions

diff --git a/_sass/_navbar.scss b/_sass/_navbar.scss
new file mode 100644
index 0000000..0ad0280
--- /dev/null
+++ b/_sass/_navbar.scss
@@ -0,0 +1,24 @@
+.toggler {
+  display: none;
+}
+
+.navbar .toggler:checked {
+  & + .navbar-brand .burger {
+    & span:nth-child(1) {
+      -webkit-transform: translateY(5px) rotate(45deg);
+      transform: translateY(5px) rotate(45deg);
+    }
+    & span:nth-child(2) {
+      opacity: 0;
+    }
+    & span:nth-child(3){
+      -webkit-transform: translateY(-5px) rotate(-45deg);
+      transform: translateY(-5px) rotate(-45deg);
+    }
+  }
+  & ~ .navbar-menu {
+    @media screen and (max-width: 1024px) {
+      display: block;
+    }
+  }
+}