diff --git a/src/App.vue b/src/App.vue
index 0d3f47f..b3813b3 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,23 +1,28 @@
 <template>
-  <div :class="{'nav-open': $sidebar.showSidebar}">
+  <div>
     <notifications></notifications>
     <router-view :key="$route.fullPath"></router-view>
   </div>
 </template>
 
 <script>
-export default {
-  methods: {
-    disableRTL() {
-      if(!this.$rtl.isRTL) {
-        this.$rtl.disableRTL();
+  export default {
+    methods: {
+      disableRTL() {
+        if (!this.$rtl.isRTL) {
+          this.$rtl.disableRTL();
+        }
+      },
+      toggleNavOpen() {
+        let root = document.getElementsByTagName('html')[0];
+        root.classList.toggle('nav-open');
       }
+    },
+    mounted() {
+      this.$watch('$route', this.disableRTL, { immediate: true });
+      this.$watch('$sidebar.showSidebar', this.toggleNavOpen)
     }
-  },
-  mounted() {
-    this.$watch('$route', this.disableRTL, {immediate: true});
-  }
-};
+  };
 </script>
 
 <style lang="scss"></style>
diff --git a/src/layout/dashboard/TopNavbar.vue b/src/layout/dashboard/TopNavbar.vue
index 38601e2..fb1048b 100644
--- a/src/layout/dashboard/TopNavbar.vue
+++ b/src/layout/dashboard/TopNavbar.vue
@@ -1,5 +1,5 @@
 <template>
-  <nav class="navbar navbar-expand-lg navbar-absolute navbar-transparent"
+  <nav class="navbar navbar-expand-lg navbar-absolute"
        :class="{'bg-white': showMenu}">
     <div class="container-fluid">
       <div class="navbar-wrapper">