diff --git a/assets/css/foundation.css b/assets/css/foundation.css
index caacabe..8929323 100644
--- a/assets/css/foundation.css
+++ b/assets/css/foundation.css
@@ -1656,31 +1656,6 @@ input[type="reset"].btn-block,
 input[type="button"].btn-block {
   width: 100%; }
 
-.fade {
-  opacity: 0;
-  transition: opacity 0.15s linear; }
-  .fade.active {
-    opacity: 1; }
-
-.collapse {
-  display: none; }
-  .collapse.active {
-    display: block; }
-
-tr.collapse.active {
-  display: table-row; }
-
-tbody.collapse.active {
-  display: table-row-group; }
-
-.collapsing {
-  position: relative;
-  height: 0;
-  overflow: hidden;
-  transition-timing-function: ease;
-  transition-duration: .35s;
-  transition-property: height; }
-
 .align-baseline {
   vertical-align: baseline !important; }
 
diff --git a/assets/css/foundation.css.map b/assets/css/foundation.css.map
index a356a45..436f451 100644
Binary files a/assets/css/foundation.css.map and b/assets/css/foundation.css.map differ
diff --git a/assets/css/main.css b/assets/css/main.css
index 1bc6b11..7189544 100644
--- a/assets/css/main.css
+++ b/assets/css/main.css
@@ -8,7 +8,11 @@
 body {
   margin: 0;
   font-family: 'Alegreya Sans', "Verdana", "Arial", sans-serif;
-  min-width: 300px; }
+  min-width: 300px;
+  overflow-x: hidden; }
+
+div.site-wrap {
+  background-color: #fff; }
 
 h1, h2, h3, h4 {
   margin-bottom: 18px;
@@ -85,6 +89,9 @@ header img {
   margin: 4px 0;
   float: left; }
 
+.nav-trigger {
+  display: none; }
+
 nav {
   box-sizing: border-box; }
   nav ul.nav {
@@ -116,26 +123,58 @@ nav {
   nav ul.nav a {
     margin: 30px 9px 1px; } }
 
+nav.mobile {
+  width: 200px;
+  height: 100%;
+  position: fixed;
+  right: -200px;
+  z-index: 0; }
+
+.site-wrap {
+  position: relative;
+  left: 0;
+  z-index: 1; }
+
 @media (max-width: 575px) {
-  nav button.navbar-toggler {
-    float: right;
-    margin-top: 24px;
-    font-family: inherit;
-    font-weight: 300; }
-  nav ul.mobileNav {
-    color: #fff;
-    background-color: #424242;
-    padding: 1rem 1rem; }
-    nav ul.mobileNav a {
-      font-size: 20px;
-      font-weight: 300; }
-    nav ul.mobileNav a.active {
-      color: #2dac01;
-      font-weight: 700; }
-  .navbar-toggler {
+  label[for="nav-trigger"] {
+    position: absolute;
+    right: 15px;
+    top: 24px;
+    z-index: 2;
     padding: 0.5rem 0.75rem;
     font-size: 1.25rem;
-    line-height: 1; } }
+    line-height: 1;
+    font-family: inherit;
+    font-weight: 300;
+    color: #373a3c;
+    background-color: #fff; }
+  nav.mobile {
+    background-color: #424242; }
+    nav.mobile ul.mobileNav {
+      color: #fff;
+      padding: 1rem 1rem;
+      padding-top: 28px; }
+      nav.mobile ul.mobileNav li {
+        margin-bottom: 0.4em; }
+        nav.mobile ul.mobileNav li a {
+          font-size: 20px;
+          font-weight: 300; }
+        nav.mobile ul.mobileNav li a.active {
+          color: #2dac01;
+          font-weight: 700; }
+      nav.mobile ul.mobileNav ul > li {
+        margin-bottom: 0.2em; }
+  .nav-trigger:checked + label {
+    right: 215px; }
+  .nav-trigger:checked ~ .site-wrap {
+    left: -200px;
+    box-shadow: 0 0 5px 5px rgba(0, 0, 0, 0.5); }
+  .nav-trigger:checked ~ nav.mobile {
+    right: 0; }
+  .nav-trigger + label, nav.mobile {
+    transition: right 0.2s; }
+  .site-wrap {
+    transition: left 0.2s; } }
 
 footer {
   margin-top: 25px;
diff --git a/assets/css/main.css.map b/assets/css/main.css.map
index b04a97b..cf83d52 100644
Binary files a/assets/css/main.css.map and b/assets/css/main.css.map differ
diff --git a/assets/css/templates/home.css b/assets/css/templates/home.css
index 516df88..af188cd 100644
--- a/assets/css/templates/home.css
+++ b/assets/css/templates/home.css
@@ -27,6 +27,6 @@ main {
 
 @media (max-width: 575px) {
   main {
-    padding-top: 16vh; } }
+    padding-top: 10vh; } }
 
 /*# sourceMappingURL=home.css.map */
\ No newline at end of file
diff --git a/assets/css/templates/photo.css b/assets/css/templates/photo.css
index 1fb1a8c..d497629 100644
--- a/assets/css/templates/photo.css
+++ b/assets/css/templates/photo.css
@@ -2,9 +2,11 @@
  * for specific template
  */
 body {
-  background-color: #424242;
   color: #fff; }
 
+div.site-wrap {
+  background-color: #424242; }
+
 a {
   color: #34c501; }
   a:active, a:hover {
@@ -20,8 +22,9 @@ main p a:visited {
       border: none; } }
 
 @media (max-width: 575px) {
-  .navbar-toggler {
-    color: #fff; } }
+  label[for="nav-trigger"] {
+    color: #fff;
+    background-color: #424242; } }
 
 footer {
   background-color: #303030;
diff --git a/assets/css/templates/photo.css.map b/assets/css/templates/photo.css.map
index 2c7458c..0f9c3a6 100644
Binary files a/assets/css/templates/photo.css.map and b/assets/css/templates/photo.css.map differ
diff --git a/assets/scss/foundation.scss b/assets/scss/foundation.scss
index a811638..df33f25 100644
--- a/assets/scss/foundation.scss
+++ b/assets/scss/foundation.scss
@@ -22,7 +22,7 @@
 @import "buttons";
 
 // Components
-@import "animation";
+//@import "animation";
 //@import "dropdown";
 //@import "button-group";
 //@import "input-group";
diff --git a/assets/scss/main.scss b/assets/scss/main.scss
index 95875b1..ab6d3d1 100644
--- a/assets/scss/main.scss
+++ b/assets/scss/main.scss
@@ -15,6 +15,10 @@ body {
   margin: 0;
   font-family: 'Alegreya Sans', "Verdana", "Arial", sans-serif;
   min-width: 300px;
+  overflow-x: hidden;
+}
+div.site-wrap {
+  background-color: $color_bg;
 }
 h1, h2, h3, h4 {
   margin-bottom: 18px;
@@ -105,6 +109,9 @@ header {
 }
 
 
+.nav-trigger {
+  display: none;
+}
 nav {
   box-sizing: border-box;
   ul.nav {
@@ -147,47 +154,81 @@ nav {
     margin: 30px 9px 1px;
   }
 }
-@include media-breakpoint-down(xs) {
-  nav {
-    button.navbar-toggler {
-      float: right;
-      margin-top: 24px;
-      font-family: inherit;
-      font-weight: 300;
-    }
-    ul.mobileNav {
-      color: $color_font_inv;
-      background-color: $color_bg_inv;
-      padding: 1rem 1rem;
-      a {
-        font-size: 20px;
-        font-weight: 300;
-      }
-      a.active {
-        color: $color_accent;
-        font-weight: 700;
-      }
-    }
-  }
 
-  // ---- from boostrap ----
-  // @requires animation.scss and collapse.js, util.js
-  .navbar-toggler {
+$mobileNav_width: 200px;
+$mobileNav_button_right: 15px;
+nav.mobile {
+  width: $mobileNav_width;
+  height: 100%;
+  position: fixed;
+  right: -$mobileNav_width;
+  z-index: 0;
+}
+.site-wrap {
+  position: relative;
+  left: 0;
+  z-index: 1;
+}
+@include media-breakpoint-down(xs) {
+  label[for="nav-trigger"] {
+    position: absolute;
+    right: $mobileNav_button_right;
+    top: 24px;
+    z-index: 2;
+    
     padding: .5rem .75rem;
     font-size: $font-size-lg;
     line-height: 1;
-//    background: none;
-    //border: $border-width solid grey;
-    //@include border-radius($btn-border-radius);
-
-//    @include hover-focus {
-//      text-decoration: none;
-//      outline: none;
-//    }
+    font-family: inherit;
+    font-weight: 300;
+    
+    // button-color
+    color: #373a3c;
+    background-color: #fff;
+  }
+  
+  nav.mobile {
+    background-color: $color_bg_inv;  
+    ul.mobileNav {
+      color: $color_font_inv;
+      padding: 1rem 1rem;
+      padding-top: 28px;
+      li {
+        margin-bottom: 0.4em;
+        a {
+          font-size: 20px;
+          font-weight: 300;
+        }
+        a.active {
+          color: $color_accent;
+          font-weight: 700;
+        }
+      }
+      ul>li {
+        margin-bottom: 0.2em;
+      }
+    }
+  }
+  .nav-trigger:checked + label {
+    right: ($mobileNav_width + $mobileNav_button_right);
+  }
+  .nav-trigger:checked ~ .site-wrap {
+    left: -$mobileNav_width;
+    box-shadow: 0 0 5px 5px rgba(0,0,0,0.5);
+  }
+  .nav-trigger:checked ~ nav.mobile {
+    right: 0;
+  }
+  .nav-trigger + label, nav.mobile {
+    transition: right 0.2s;
+  }
+  .site-wrap {
+    transition: left 0.2s;
   }
 }
 
 
+
 $footer_logoHeight: 1.4rem;
 $footer_margin:     25px;
 $footer_height:     70px;
diff --git a/assets/scss/templates/home.scss b/assets/scss/templates/home.scss
index 893f7b1..92db0dc 100644
--- a/assets/scss/templates/home.scss
+++ b/assets/scss/templates/home.scss
@@ -47,6 +47,6 @@ main {
 
 @include media-breakpoint-down(xs) {
   main {
-    padding-top: 16vh;
+    padding-top: 10vh;
   }
 }
diff --git a/assets/scss/templates/photo.scss b/assets/scss/templates/photo.scss
index ed2dbbc..9c4f1e4 100644
--- a/assets/scss/templates/photo.scss
+++ b/assets/scss/templates/photo.scss
@@ -9,9 +9,11 @@
 
 // change main.scss behavior - inverted color style
 body {
-  background-color: $color_bg_inv;
   color: $color_font_inv;
 }
+div.site-wrap {
+  background-color: $color_bg_inv;
+}
 a {
   color: $link_color_inv;
   &:active, &:hover {
@@ -34,8 +36,10 @@ main p {
   }
 }
 @include media-breakpoint-down(xs) {
-  .navbar-toggler {
-      color: $nav_fgColor;
+  label[for="nav-trigger"] {
+    // button color inverted
+    color: $nav_fgColor;
+    background-color: $color_bg_inv;
   }
 }
 footer {
diff --git a/site/snippets/base/cont-footer.php b/site/snippets/base/cont-footer.php
index fcddc75..a12e1eb 100644
--- a/site/snippets/base/cont-footer.php
+++ b/site/snippets/base/cont-footer.php
@@ -28,3 +28,5 @@
     </div>
   </div>
 </footer>
+
+</div><!--end div.site-wrap-->
diff --git a/site/snippets/base/cont-header.php b/site/snippets/base/cont-header.php
index 8fd2a04..fbfd151 100644
--- a/site/snippets/base/cont-header.php
+++ b/site/snippets/base/cont-header.php
@@ -20,24 +20,27 @@ if ($page->depth() == 1) {
 }
 ?>
 
-<div class="collapse hidden-sm-up" id="exCollapsingNavbar">
-  <nav>
-    <ul class="nav mobileNav">
-      <li><a href="<?php echo $site->url()?>">Home</a></li>
-    <?php foreach ($site->children()->visible() as $p) : ?>
-      <li><a href="<?php echo $p->url()?>" <?php echo ($page == $p)?'class="active"':'' ?>><?php echo $p->title() ?></a></li>
-      <?php if ($p->hasVisibleChildren() && $p->template() != 'blog') : ?>
-      <ul class="">
-      <?php foreach ($p->children()->visible() as $c) : ?>
-        <li><a href="<?php echo $c->url()?>" <?php echo ($page == $c)?'class="active"':'' ?>><?php echo $c->title() ?></a></li>
-      <?php endforeach; ?>
-      </ul>
-      <?php endif; ?>
+<input type="checkbox" id="nav-trigger" class="nav-trigger" />
+<label class="hidden-sm-up" for="nav-trigger">Menü</label>
+
+<nav class="mobile">
+  <ul class="nav mobileNav">
+    <li><a href="<?php echo $site->url()?>">Home</a></li>
+  <?php foreach ($site->children()->visible() as $p) : ?>
+    <li><a href="<?php echo $p->url()?>" <?php echo ($page == $p)?'class="active"':'' ?>><?php echo $p->title() ?></a></li>
+    <?php if ($p->hasVisibleChildren() && $p->template() != 'blog') : ?>
+    <ul class="">
+    <?php foreach ($p->children()->visible() as $c) : ?>
+      <li><a href="<?php echo $c->url()?>" <?php echo ($page == $c)?'class="active"':'' ?>><?php echo $c->title() ?></a></li>
     <?php endforeach; ?>
     </ul>
-  </nav>
-</div>
+    <?php endif; ?>
+  <?php endforeach; ?>
+  </ul>
+</nav>
 
+
+<div class="site-wrap">
 <header class="section">
   <div class="container">
     <?php if ($img = $site->images()->find($site->title_image())) : ?>
@@ -47,10 +50,6 @@ if ($page->depth() == 1) {
     <?php endif; ?>
 
     <nav aria-hidden="true">
-      <button class="btn btn-lg btn-secondary navbar-toggler hidden-sm-up" type="button" data-toggle="collapse" data-target="#exCollapsingNavbar">
-        Menü
-      </button>
-
       <ul class="nav hidden-xs-down">
 <?php if(!$subnav) : ?>
       <?php foreach ($site->children()->visible() as $p) : ?>
diff --git a/site/snippets/base/html-end.php b/site/snippets/base/html-end.php
index c1d2d10..56ddb49 100644
--- a/site/snippets/base/html-end.php
+++ b/site/snippets/base/html-end.php
@@ -9,7 +9,7 @@
 // -------------------------------------------
 
 // available switches:
-$switches = array("bs_util", "bs_collapse", "bs_carousel", "plg_masonry");
+$switches = array("bs_util", "bs_carousel", "plg_masonry");
 $jquery = false;
 
 foreach ($switches as $switch) {
@@ -31,9 +31,6 @@ foreach ($switches as $switch) {
 if($bs_util) {
 echo js('assets/vendors/bootstrap/js/dist/util.js');
 }
-if($bs_collapse) {
-echo js('assets/vendors/bootstrap/js/dist/collapse.js');
-}
 if($bs_carousel) {
 echo js('assets/vendors/bootstrap/js/dist/carousel.js');
 }
diff --git a/site/templates/blog.php b/site/templates/blog.php
index 938a871..0870f8f 100644
--- a/site/templates/blog.php
+++ b/site/templates/blog.php
@@ -79,5 +79,4 @@ snippet('base/cont-header');
 </main>
 
 <?php snippet('base/cont-footer') ?>
-<?php snippet('base/html-end', ["bs_util"=>1,
-                                "bs_collapse"=>1]) ?>
+<?php snippet('base/html-end', []) ?>
diff --git a/site/templates/blogarticle.php b/site/templates/blogarticle.php
index e841678..fc639fc 100644
--- a/site/templates/blogarticle.php
+++ b/site/templates/blogarticle.php
@@ -61,5 +61,4 @@ snippet('base/cont-header');
 </main>
 
 <?php snippet('base/cont-footer') ?>
-<?php snippet('base/html-end', ["bs_util"=>1,
-                                "bs_collapse"=>1]) ?>
+<?php snippet('base/html-end', []) ?>
diff --git a/site/templates/default.php b/site/templates/default.php
index 17ce428..8867adb 100644
--- a/site/templates/default.php
+++ b/site/templates/default.php
@@ -21,5 +21,4 @@ snippet('base/cont-header');
 </main>
 
 <?php snippet('base/cont-footer') ?>
-<?php snippet('base/html-end', ["bs_util"=>1,
-                                "bs_collapse"=>1]) ?>
+<?php snippet('base/html-end', []) ?>
diff --git a/site/templates/photo.php b/site/templates/photo.php
index 9a47119..68a7027 100644
--- a/site/templates/photo.php
+++ b/site/templates/photo.php
@@ -28,6 +28,5 @@ snippet('base/cont-header');
 
 <?php snippet('base/cont-footer') ?>
 <?php snippet('base/html-end', ["bs_util"=>1,
-                                "bs_collapse"=>1,
                                 "bs_carousel"=>1,
                                 "plg_masonry"=>1]) ?>
diff --git a/site/templates/project.php b/site/templates/project.php
index bc99760..4b55b6b 100644
--- a/site/templates/project.php
+++ b/site/templates/project.php
@@ -25,6 +25,5 @@ snippet('base/cont-header');
 
 <?php snippet('base/cont-footer') ?>
 <?php snippet('base/html-end', ["bs_util"=>1,
-                                "bs_collapse"=>1,
                                 "bs_carousel"=>0,
                                 "plg_masonry"=>1]) ?>
diff --git a/site/templates/projects.php b/site/templates/projects.php
index d41c96f..a5abc2b 100644
--- a/site/templates/projects.php
+++ b/site/templates/projects.php
@@ -41,5 +41,4 @@ snippet('base/cont-header');
 </main>
 
 <?php snippet('base/cont-footer') ?>
-<?php snippet('base/html-end', ["bs_util"=>1,
-                                "bs_collapse"=>1]) ?>
+<?php snippet('base/html-end', []) ?>
diff --git a/site/templates/webdesign.php b/site/templates/webdesign.php
index 46c4670..a1f678b 100644
--- a/site/templates/webdesign.php
+++ b/site/templates/webdesign.php
@@ -33,5 +33,4 @@ snippet('base/cont-header');
 </main>
 
 <?php snippet('base/cont-footer') ?>
-<?php snippet('base/html-end', ["bs_util"=>1,
-                                "bs_collapse"=>1]) ?>
+<?php snippet('base/html-end', []) ?>