Improve navigation menu hover style with submenus

Tetrakern · Dec 17, 2024 · 96f7cf4 · 96f7cf4
1 parent af12e3d
commit 96f7cf4
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 14 deletions.
diff --git a/css/application.css b/css/application.css
diff --git a/css/complete.css b/css/complete.css
diff --git a/src/scss/_icon-menu.scss b/src/scss/_icon-menu.scss
@@ -55,12 +55,6 @@
     @include bp(desktop) {
       border-radius: var(--layout-border-radius-small);
     }
-
-    &.menu-item-has-children {
-      @include bp(desktop) {
-        border-radius: var(--layout-border-radius-small) var(--layout-border-radius-small) 0 0;
-      }
-    }
   }
 
   .sub-menu .menu-item :where(a, label, button):where(:not(._no-menu-item-style)) {

diff --git a/src/scss/_navigation.scss b/src/scss/_navigation.scss
@@ -204,12 +204,6 @@
       @include bp(desktop) {
         border-radius: var(--layout-border-radius-small);
       }
-
-      &.menu-item-has-children {
-        @include bp(desktop) {
-          border-radius: var(--layout-border-radius-small) var(--layout-border-radius-small) 0 0;
-        }
-      }
     }
   }
 }
@@ -220,6 +214,17 @@
     height: fit-content;
     transition: background-color .1s;
 
+    &.menu-item-has-children {
+      transition: background-color .1s, border-radius .1s;
+      transition-delay: 0s, .3s;
+
+      &:hover {
+        @include bp(desktop) {
+        border-radius: var(--layout-border-radius-small) var(--layout-border-radius-small) 0 0;
+      }
+      }
+    }
+
     &:not(:hover) {
       .sub-menu {
         pointer-events: none;