diff --git a/components/navigation/Bar.vue b/components/navigation/Bar.vue
index 7016db3424765da5c9be46bf0a4c1fcf095ad610..eb3fe5f57383514ef10b1d71de4e36fd440e8834 100644
--- a/components/navigation/Bar.vue
+++ b/components/navigation/Bar.vue
@@ -1,5 +1,5 @@
 <template>
-  <header>
+  <header class="header position-fixed">
     <div class="position-relative">
       <button class="toggle btn border-secondary position-absolute p-1 m-1 ml-3" @click="toggleMenu"><span></span></button>
       <NavigationBreadcrumb :breadcrumb="breadcrumb" class="breadcrumb p-1" />
@@ -26,6 +26,18 @@ export default {
 <style lang="scss">
 $btn-width: 50px;
 
+.header {
+  --menu-width: 0px;
+  width: calc(99vw - var(--menu-width));
+  z-index: 100;
+  background: var(--background-color-primary);
+  transition: width .5s ease-in-out;
+
+  .open & {
+    --menu-width: 320px;
+  }
+}
+
 nav.breadcrumb {
   margin: .5rem .5rem .5rem 5rem;
 
diff --git a/layouts/default.vue b/layouts/default.vue
index c8745e74cc58366ea35348056a091c6788b5fba4..906f4fcebd7180997b47a68bd60a8e116cc5481c 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -56,4 +56,7 @@ export default {
 .app {
     transition: margin .5s ease-in-out;
 }
+main {
+  padding-top: 5rem;
+}
 </style>
\ No newline at end of file