From b3e2bdf0fea4b6d9a0931481142fb462146d3439 Mon Sep 17 00:00:00 2001
From: mayuran-deriv <129507167+mayuran-deriv@users.noreply.github.com>
Date: Tue, 24 Oct 2023 11:06:20 +0400
Subject: [PATCH] fix: hover issue (#5792)

* fix: hover issue

* fix: hover issue

* fix: adding height

* fix: height
---
 .../template/desktop-menu/desktop.items.tsx          |  6 +++++-
 .../navigation/template/desktop-menu/styles.scss     | 12 ++++++++++++
 2 files changed, 17 insertions(+), 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
index 362dfba0b5b..a25e3d4b0af 100644
--- 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
index 85fcec8273b..ba9e7978b74 100644
--- 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;
+        }
+    }
+}