fix display of main navigation overflow, fixes #6359

Closes #6359

Merge request studip/studip!4819

1 files changed, 16 insertions, 9 deletions

diff --git a/resources/assets/stylesheets/scss/navigation.scss b/resources/assets/stylesheets/scss/navigation.scss
index d876a22..1346fd6 100644
--- a/resources/assets/stylesheets/scss/navigation.scss
+++ b/resources/assets/stylesheets/scss/navigation.scss
@@ -122,7 +122,7 @@ body:not(.fixed) #navigation-level-1-items {
         }
 
         // Rotate icon
-        > label img {
+        > label svg {
             transition: transform var(--transition-duration);
             transform: rotate(90deg);
         }
@@ -132,14 +132,18 @@ body:not(.fixed) #navigation-level-1-items {
             transition: opacity var(--transition-duration);
         }
 
+        &::after {
+
+        }
+
         // Display menu on activation
         &:hover label,
         input[type="checkbox"]:checked {
             ~ ul {
                 display: block;
             }
-            img,
-            ~ label img {
+            svg,
+            ~ label svg {
                 transform: rotate(180deg);
             }
             > a[data-badge]::before {
@@ -156,11 +160,11 @@ body:not(.fixed) #navigation-level-1-items {
             z-index: 10;
 
             list-style: none;
-            margin: 5px 0 0;
+            margin-top: 1px;
             padding: 4px 4px;
 
-            background-color: var(--dark-gray-color-5);
-            border: 1px solid var(--dark-gray-color-40);
+            background-color: var(--color--main-navigation-background);
+            border: 1px solid var(--color--main-navigation-border);
             border-top: 0;
 
             min-width: 150px;
@@ -182,9 +186,9 @@ body:not(.fixed) #navigation-level-1-items {
                         left: 21px;
                     }
                 }
-                img {
-                    flex: 1 0 20px;
-                    @include square(20px);
+                img,
+                svg {
+                    flex: 1 0 auto;
                     margin: 0 0.25em;
 
                 }
@@ -197,6 +201,9 @@ body:not(.fixed) #navigation-level-1-items {
                 br {
                     display: none;
                 }
+                &:hover::after {
+                    height: 2px;
+                }
             }
         }
     }