css for product

crate · Oct 2, 2024 · c2c90b9 · c2c90b9
1 parent 0e78f65
commit c2c90b9
Showing 1 changed file with 19 additions and 8 deletions.
diff --git a/src/crate/theme/rtd/crate/static/css/custom.css b/src/crate/theme/rtd/crate/static/css/custom.css
@@ -1691,8 +1691,6 @@ td > :last-child {
   margin-bottom: 0px;
 }
 
-/* header navigation from main site */
-
 /* General menu styling */
 .main-site-menu {
   list-style: none;
@@ -1705,11 +1703,11 @@ td > :last-child {
 
 .main-site-menu-link {
   text-decoration: none;
-  list-style: none;
   color: #333; /* Dark gray for links to match the site's text color */
   padding: 10px 15px;
   display: block;
   font-weight: 400; /* Normal weight for consistency */
+  white-space: nowrap; /* Prevent wrapping */
 }
 
 /* Hide sub-menus initially */
@@ -1730,23 +1728,36 @@ td > :last-child {
   display: block;
 }
 
+/* Ensure the "Product" submenu categories display side by side */
+.main-site-menu-item-has-children .main-site-sub-menu {
+  display: flex; /* Display categories side by side */
+  gap: 20px; /* Space between categories */
+  padding: 10px;
+}
+
+/* Nested sub-menu for categories (like Database, Data Models) */
+.main-site-sub-menu .main-site-menu-item-has-children:hover > .main-site-sub-menu {
+  left: 100%;
+  top: 0;
+  position: absolute;
+}
+
 /* Ensure that sub-menu items stack vertically */
 .main-site-sub-menu li {
   display: block;
-  width: 200px; /* Adjust as needed */
+  width: 200px; /* Adjust width as needed */
 }
 
 /* Style for sub-menu links */
 .main-site-sub-menu a {
   padding: 10px;
   display: block;
-  white-space: nowrap;
-  color: #000; /* Blue color for hover links */
+  color: #000; /* Default color for sub-menu links */
 }
 
 /* Add hover effect */
 .main-site-menu-link:hover, .main-site-sub-menu a:hover {
-  color: #111; /* Darker blue for hovered links */
+  color: #111; /* Darker color for hovered links */
 }
 
 /* Ensure the parent .main-site-menu-item is positioned relatively for sub-menu placement */
@@ -1757,6 +1768,6 @@ td > :last-child {
 /* Hide the entire navigation on mobile (max width: 768px) */
 @media (max-width: 768px) {
   .main-site-menu {
-      display: none; /* This hides the whole navigation on mobile */
+    display: none; /* This hides the whole navigation on mobile */
   }
 }