diff --git a/src/app/main/main.component.html b/src/app/main/main.component.html
index d96e65ef..fe5924d6 100644
--- a/src/app/main/main.component.html
+++ b/src/app/main/main.component.html
@@ -10,7 +10,7 @@
 
         <div id="wrapper">
 
-            <fuse-navbar class="md-primary-700-bg" *ngIf="layoutSettings.navigation === 'left'"></fuse-navbar>
+            <fuse-navbar [folded]="true" class="md-primary-700-bg left-navbar" *ngIf="layoutSettings.navigation === 'left'"></fuse-navbar>
 
             <div class="content-wrapper">
 
@@ -30,7 +30,7 @@
 
             </div>
 
-            <fuse-navbar class="md-primary-bg" *ngIf="layoutSettings.navigation === 'right'"></fuse-navbar>
+            <fuse-navbar [folded]="true" class="md-primary-700-bg right-navbar" *ngIf="layoutSettings.navigation === 'right'"></fuse-navbar>
 
         </div>
 
diff --git a/src/app/main/navbar/navbar-toggle.directive.ts b/src/app/main/navbar/navbar-toggle.directive.ts
index 50e41ee5..1e18aafa 100644
--- a/src/app/main/navbar/navbar-toggle.directive.ts
+++ b/src/app/main/navbar/navbar-toggle.directive.ts
@@ -10,18 +10,20 @@ export class FuseNavbarToggleDirective
     @Input() fuseNavbar: string;
     navbar: FuseNavbarComponent;
 
-    constructor(navbar: FuseNavbarService)
+    constructor(private navbarService: FuseNavbarService)
     {
-        this.navbar = navbar.getNavBar();
     }
 
     @HostListener('click')
     onClick()
     {
+        this.navbar = this.navbarService.getNavBar();
+
         if ( !this.navbar[this.fuseNavbar] )
         {
             return;
         }
+
         this.navbar[this.fuseNavbar]();
     }
 }
diff --git a/src/app/main/navbar/navbar.component.scss b/src/app/main/navbar/navbar.component.scss
index 4f4b48ef..4c2213ed 100644
--- a/src/app/main/navbar/navbar.component.scss
+++ b/src/app/main/navbar/navbar.component.scss
@@ -5,7 +5,14 @@ body {
     &.fuse-nav-bar-folded {
 
         .content-wrapper {
-            padding-left: 64px !important;
+
+            &:last-child {
+                padding-left: 64px !important;
+            }
+
+            &:first-child {
+                padding-right: 64px !important;
+            }
         }
     }
 }
@@ -27,6 +34,13 @@ fuse-navbar {
     &.folded {
         position: absolute;
 
+        &.left-navbar {
+            left: 0;
+        }
+        &.right-navbar {
+            right: 0;
+        }
+
         &:not(.folded-open) {
             width: 64px;
             min-width: 64px;
@@ -42,20 +56,35 @@ fuse-navbar {
         }
     }
 
-    &.open {
-        transform: translateX(0) !important;
-    }
-
     &.close {
-        transform: translateX(-100%) !important;
+        &.left-navbar {
+            transform: translateX(-100%) !important;
+        }
+        &.right-navbar {
+            transform: translateX(100%) !important;
+        }
+        box-shadow: none;
     }
 
     @include media-breakpoint('xs') {
         position: absolute;
         top: 0;
-        left: 0;
         bottom: 0;
-        transform: translateX(-100%);
+        &.left-navbar {
+            left: 0;
+        }
+        &.right-navbar {
+            right: 0;
+        }
+
+        &:not(.initialized) {
+            &.left-navbar {
+                transform: translateX(-100%);
+            }
+            &.right-navbar {
+                transform: translateX(100%);
+            }
+        }
     }
 
     .navbar-header {
diff --git a/src/app/main/navbar/navbar.component.ts b/src/app/main/navbar/navbar.component.ts
index 3932b1b9..9702b3a5 100644
--- a/src/app/main/navbar/navbar.component.ts
+++ b/src/app/main/navbar/navbar.component.ts
@@ -1,8 +1,9 @@
-import { Component, HostBinding, HostListener, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
+import { Component, HostBinding, HostListener, Input, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
 import { AppComponent } from '../../app.component';
 import { Subscription } from 'rxjs/Subscription';
 import { FuseMatchMedia } from '../../core/services/match-media.service';
 import { FuseNavbarService } from './navbar.service';
+import { ObservableMedia } from '@angular/flex-layout';
 
 @Component({
     selector     : 'fuse-navbar',
@@ -13,39 +14,70 @@ import { FuseNavbarService } from './navbar.service';
 export class FuseNavbarComponent implements OnInit, OnDestroy
 {
     @HostBinding('class.close') isClosed: boolean;
-    @HostBinding('class.open') isOpened: boolean = !this.isClosed;
-
     @HostBinding('class.folded') isFoldedActive: boolean;
     @HostBinding('class.folded-open') isFoldedOpen: boolean;
+    @HostBinding('class.initialized') initialized: boolean;
+    @Input('folded') foldedByDefault = false;
 
     matchMediaWatcher: Subscription;
 
     constructor(
         private bodyEl: AppComponent,
         private fuseMatchMedia: FuseMatchMedia,
-        private navBarService: FuseNavbarService
+        private navBarService: FuseNavbarService,
+        public media: ObservableMedia
     )
     {
         navBarService.setNavBar(this);
-        this.isClosed = false;
-        this.isFoldedActive = false;
-        this.isFoldedOpen = false;
-        this.updateCssClasses();
 
         this.matchMediaWatcher =
             this.fuseMatchMedia.onMediaChange
                 .subscribe((mediaStep) => {
-                    if ( mediaStep === 'xs' )
-                    {
-                        this.closeBar();
-                    }
-                    else
-                    {
-                        this.openBar();
-                    }
+                    setTimeout(() => {
+
+                        if ( mediaStep === 'xs' )
+                        {
+                            this.closeBar();
+                            this.deActivateFolded();
+                        }
+                        else
+                        {
+                            this.openBar();
+                        }
+                    });
                 });
     }
 
+    ngOnInit()
+    {
+        this.isClosed = false;
+        this.isFoldedActive = this.foldedByDefault;
+        this.isFoldedOpen = false;
+        this.initialized = false;
+        this.updateCssClasses();
+
+        setTimeout(() => {
+            this.initialized = true;
+        });
+
+        if ( this.media.isActive('xs') )
+        {
+            this.closeBar();
+            this.deActivateFolded();
+        }
+        else
+        {
+            if ( !this.foldedByDefault )
+            {
+                this.deActivateFolded();
+            }
+            else
+            {
+                this.activateFolded();
+            }
+        }
+    }
+
     openBar()
     {
         this.isClosed = false;
@@ -74,14 +106,25 @@ export class FuseNavbarComponent implements OnInit, OnDestroy
     {
         if ( !this.isFoldedActive )
         {
-            this.isFoldedActive = true;
-            this.bodyEl.addClass('fuse-nav-bar-folded');
+            this.activateFolded();
         }
         else
         {
-            this.isFoldedActive = false;
-            this.bodyEl.removeClass('fuse-nav-bar-folded');
+            this.deActivateFolded();
         }
+    }
+
+    activateFolded()
+    {
+        this.isFoldedActive = true;
+        this.bodyEl.addClass('fuse-nav-bar-folded');
+        this.isFoldedOpen = false;
+    }
+
+    deActivateFolded()
+    {
+        this.isFoldedActive = false;
+        this.bodyEl.removeClass('fuse-nav-bar-folded');
         this.isFoldedOpen = false;
     }
 
@@ -111,11 +154,6 @@ export class FuseNavbarComponent implements OnInit, OnDestroy
         }
     }
 
-    ngOnInit()
-    {
-
-    }
-
     ngOnDestroy()
     {
         this.matchMediaWatcher.unsubscribe();