diff --git a/src/app/layout/components/navbar/vertical/style-1/style-1.component.html b/src/app/layout/components/navbar/vertical/style-1/style-1.component.html
index 53cd80ac..c6effb77 100644
--- a/src/app/layout/components/navbar/vertical/style-1/style-1.component.html
+++ b/src/app/layout/components/navbar/vertical/style-1/style-1.component.html
@@ -22,7 +22,8 @@
 </div>
 
 
-<div class="navbar-scroll-container" fusePerfectScrollbar [fusePerfectScrollbarOptions]="{suppressScrollX: true}">
+<div class="navbar-scroll-container" [ngClass]="fuseConfig.layout.navbar.primaryBackground"
+     fusePerfectScrollbar [fusePerfectScrollbarOptions]="{suppressScrollX: true}">
 
     <div class="user" fxLayout="column" [ngClass]="fuseConfig.layout.navbar.secondaryBackground">
 
@@ -34,7 +35,7 @@
 
     </div>
 
-    <div class="navbar-content" [ngClass]="fuseConfig.layout.navbar.primaryBackground">
+    <div class="navbar-content">
         <fuse-navigation layout="vertical"></fuse-navigation>
     </div>
 
diff --git a/src/app/layout/components/navbar/vertical/style-1/style-1.component.ts b/src/app/layout/components/navbar/vertical/style-1/style-1.component.ts
index acdc3238..43a8906f 100644
--- a/src/app/layout/components/navbar/vertical/style-1/style-1.component.ts
+++ b/src/app/layout/components/navbar/vertical/style-1/style-1.component.ts
@@ -1,7 +1,7 @@
 import { Component, OnDestroy, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
 import { NavigationEnd, Router } from '@angular/router';
 import { Subject } from 'rxjs';
-import { filter, take, takeUntil } from 'rxjs/operators';
+import { delay, filter, take, takeUntil } from 'rxjs/operators';
 
 import { FuseConfigService } from '@fuse/services/config.service';
 import { FuseNavigationService } from '@fuse/components/navigation/navigation.service';
@@ -17,7 +17,6 @@ import { FuseSidebarService } from '@fuse/components/sidebar/sidebar.service';
 export class NavbarVerticalStyle1Component implements OnInit, OnDestroy
 {
     fuseConfig: any;
-    fusePerfectScrollbarUpdateTimeout: any;
     navigation: any;
 
     // Private
@@ -60,11 +59,12 @@ export class NavbarVerticalStyle1Component implements OnInit, OnDestroy
 
         // Update the scrollbar on collapsable item toggle
         this._fuseNavigationService.onItemCollapseToggled
-            .pipe(takeUntil(this._unsubscribeAll))
+            .pipe(
+                delay(500),
+                takeUntil(this._unsubscribeAll)
+            )
             .subscribe(() => {
-                this.fusePerfectScrollbarUpdateTimeout = setTimeout(() => {
-                    this._fusePerfectScrollbar.update();
-                }, 310);
+                this._fusePerfectScrollbar.update();
             });
 
         // Scroll to the active item position
@@ -135,11 +135,6 @@ export class NavbarVerticalStyle1Component implements OnInit, OnDestroy
      */
     ngOnDestroy(): void
     {
-        if ( this.fusePerfectScrollbarUpdateTimeout )
-        {
-            clearTimeout(this.fusePerfectScrollbarUpdateTimeout);
-        }
-
         // Unsubscribe from all subscriptions
         this._unsubscribeAll.next();
         this._unsubscribeAll.complete();
diff --git a/src/app/layout/components/navbar/vertical/style-2/style-2.component.ts b/src/app/layout/components/navbar/vertical/style-2/style-2.component.ts
index 36b43fa4..6f794a2b 100644
--- a/src/app/layout/components/navbar/vertical/style-2/style-2.component.ts
+++ b/src/app/layout/components/navbar/vertical/style-2/style-2.component.ts
@@ -1,7 +1,7 @@
 import { Component, OnDestroy, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
 import { NavigationEnd, Router } from '@angular/router';
 import { Subject } from 'rxjs';
-import { filter, take, takeUntil } from 'rxjs/operators';
+import { delay, filter, take, takeUntil } from 'rxjs/operators';
 
 import { FuseConfigService } from '@fuse/services/config.service';
 import { FuseNavigationService } from '@fuse/components/navigation/navigation.service';
@@ -17,7 +17,6 @@ import { FuseSidebarService } from '@fuse/components/sidebar/sidebar.service';
 export class NavbarVerticalStyle2Component implements OnInit, OnDestroy
 {
     fuseConfig: any;
-    fusePerfectScrollbarUpdateTimeout: any;
     navigation: any;
 
     // Private
@@ -60,11 +59,12 @@ export class NavbarVerticalStyle2Component implements OnInit, OnDestroy
 
         // Update the scrollbar on collapsable item toggle
         this._fuseNavigationService.onItemCollapseToggled
-            .pipe(takeUntil(this._unsubscribeAll))
+            .pipe(
+                delay(500),
+                takeUntil(this._unsubscribeAll)
+            )
             .subscribe(() => {
-                this.fusePerfectScrollbarUpdateTimeout = setTimeout(() => {
-                    this._fusePerfectScrollbar.update();
-                }, 310);
+                this._fusePerfectScrollbar.update();
             });
 
         // Scroll to the active item position
@@ -135,11 +135,6 @@ export class NavbarVerticalStyle2Component implements OnInit, OnDestroy
      */
     ngOnDestroy(): void
     {
-        if ( this.fusePerfectScrollbarUpdateTimeout )
-        {
-            clearTimeout(this.fusePerfectScrollbarUpdateTimeout);
-        }
-
         // Unsubscribe from all subscriptions
         this._unsubscribeAll.next();
         this._unsubscribeAll.complete();