diff --git a/docs/site/src/css/custom.css b/docs/site/src/css/custom.css
index 6f32aed5d3d..e1f1037c925 100644
--- a/docs/site/src/css/custom.css
+++ b/docs/site/src/css/custom.css
@@ -123,26 +123,33 @@
   color: white;
 }
 /** navbar overrides */
-[data-theme="light"] .menu__link {
-  color: #525860;
+[data-theme="light"] .clean-btn:hover {
+    background-color: #525860;
 }
 
-[data-theme="light"] .menu__link--active {
-  font-weight: bold;
-  color: #525860;
-}
 [data-theme="dark"] .menu__link--active {
   font-weight: bold;
   color: white;
 }
-.navbar-sidebar,
-.menu__link {
-  color: rgba(255, 255, 255, 0.7);
-}
 
-[data-theme="light"] .menu__link--active {
-  font-weight: bold;
-  color: #525860;
+@media (min-width: 997px) {
+  [data-theme="light"] .menu__link:hover,
+  [data-theme="light"] .menu__link--active{
+    font-weight: bold;
+    color: var(--ifm-menu-color)
+  }
+}
+@media (max-width: 996px) {
+.navbar-sidebar,
+  .menu__link {
+    color: rgba(255, 255, 255, 0.7);
+  }
+  
+  [data-theme="light"] .menu__list-item-collapsible:hover,
+      [data-theme="light"] .menu__link--active {
+    font-weight: bold;
+    color: white;
+  }
 }
 
 [data-theme="light"] .pagination-nav__label {
@@ -223,10 +230,6 @@
 [data-theme="dark"] .pagination-nav__label--light {
   color: white;
 }
-[data-theme="dark"] .navbar-sidebar .menu__link--active {
-  background-color: rgba(11, 11, 11, 0.607);
-  color: var(--iota-gray-100);
-}
 html[data-theme="dark"] {
   background-color: var(--iota-black);
 }
@@ -362,7 +365,6 @@ h4 {
 }
 .navbar__items .navbar__brand {
   width: 17%;
-
   color: rgba(255, 255, 255, 0.7);
 }
 .navbar__items .navbar__item.navbar__link {
@@ -373,6 +375,13 @@ h4 {
   letter-spacing: -0.02em;
   color: rgba(255, 255, 255, 0.7);
 }
+
+
+.navbar__items .navbar__item.navbar__link--active {
+  font-weight: bold;
+  color:white;
+}
+
 .navbar__items_wrapper {
   display: flex;
   column-gap: 0rem;