fix: hover issue (#5792)

* fix: hover issue * fix: hover issue * fix: adding height * fix: height
binary-com · Oct 24, 2023 · b3e2bdf · b3e2bdf · vercel · Oct 24, 2023
1 parent 9ea9685
commit b3e2bdf
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 1 deletion.
diff --git a/src/features/components/templates/navigation/template/desktop-menu/desktop.items.tsx b/src/features/components/templates/navigation/template/desktop-menu/desktop.items.tsx
@@ -25,7 +25,11 @@ const NavDesktopItem = ({ item, active }: DesktopItemsProps) => {
     return (
         <NavigationMenu.Item value={item.data.title}>
             <NavigationMenu.Trigger className="navigation_trigger" onClick={handleClick}>
-                <Typography.Paragraph size="medium" font_family="UBUNTU">
+                <Typography.Paragraph
+                    size="medium"
+                    font_family="UBUNTU"
+                    className="nav_text_wrapper"
+                >
                     <Localize translate_text={item.data.title} />
                 </Typography.Paragraph>
             </NavigationMenu.Trigger>

diff --git a/src/features/components/templates/navigation/template/desktop-menu/styles.scss b/src/features/components/templates/navigation/template/desktop-menu/styles.scss
@@ -95,3 +95,15 @@
 .trade_landing_active {
     inset-inline-end: 5rem;
 }
+.nav_text_wrapper {
+    @include breakpoints(tablet) {
+        position: relative;
+        &::before {
+            position: absolute;
+            content: '';
+            left: 0;
+            right: 0;
+            height: 5rem;
+        }
+    }
+}