diff --git a/src/@core/scss/_mixins.scss b/src/@core/scss/_mixins.scss
index 0d0dfed1..62025ea1 100644
--- a/src/@core/scss/_mixins.scss
+++ b/src/@core/scss/_mixins.scss
@@ -17,18 +17,16 @@
 // ℹ️ This mixin is inspired from vuetify for adding hover styles via before pseudo element
 @mixin before-pseudo() {
   position: relative;
-  @media (hover) {
-    &::before {
-      position: absolute;
-      background: currentcolor;
-      block-size: 100%;
-      border-radius: inherit;
-      content: "";
-      inline-size: 100%;
-      inset: 0;
-      opacity: 0;
-      pointer-events: none;
-    }
+  &::before {
+    position: absolute;
+    background: currentcolor;
+    block-size: 100%;
+    border-radius: inherit;
+    content: "";
+    inline-size: 100%;
+    inset: 0;
+    opacity: 0;
+    pointer-events: none;
   }
 }
 
diff --git a/src/@core/scss/base/_mixins.scss b/src/@core/scss/base/_mixins.scss
index 7c59f14c..1ad6ef06 100644
--- a/src/@core/scss/base/_mixins.scss
+++ b/src/@core/scss/base/_mixins.scss
@@ -8,18 +8,16 @@
 // ℹ️ This mixin is inspired from vuetify for adding hover styles via before pseudo element
 @mixin before-pseudo() {
   position: relative;
-  @media (hover) {
-    &::before {
-      position: absolute;
-      border-radius: inherit;
-      background: currentcolor;
-      block-size: 100%;
-      content: "";
-      inline-size: 100%;
-      inset: 0;
-      opacity: 0;
-      pointer-events: none;
-    }
+  &::before {
+    position: absolute;
+    border-radius: inherit;
+    background: currentcolor;
+    block-size: 100%;
+    content: "";
+    inline-size: 100%;
+    inset: 0;
+    opacity: 0;
+    pointer-events: none;
   }
 }
 
diff --git a/src/@layouts/components/VerticalNav.vue b/src/@layouts/components/VerticalNav.vue
index 914c3b25..af6e83f2 100644
--- a/src/@layouts/components/VerticalNav.vue
+++ b/src/@layouts/components/VerticalNav.vue
@@ -70,12 +70,15 @@ function handleNavScroll(evt: Event) {
     <slot name="nav-items" :update-is-vertical-nav-scrolled="updateIsVerticalNavScrolled">
       <PerfectScrollbar
         tag="ul"
-        class="nav-items"
+        class="nav-items d-none d-lg-block"
         :options="{ wheelPropagation: false }"
         @ps-scroll-y="handleNavScroll"
       >
         <slot />
       </PerfectScrollbar>
+      <ul class="nav-items d-lg-none overflow-auto">
+        <slot />
+      </ul>
     </slot>
 
     <slot name="after-nav-items" />