diff --git a/src/crate/theme/rtd/crate/sections/header.html b/src/crate/theme/rtd/crate/sections/header.html
index 8f5eec27e..69410d9e1 100644
--- a/src/crate/theme/rtd/crate/sections/header.html
+++ b/src/crate/theme/rtd/crate/sections/header.html
@@ -10,18 +10,169 @@
 }}/images/cratedb-logo.svg)
-{% endif %}
+{% endif %}
\ No newline at end of file
diff --git a/src/crate/theme/rtd/crate/static/css/crateio.css b/src/crate/theme/rtd/crate/static/css/crateio.css
index deaae0ac2..67e2f02da 100644
--- a/src/crate/theme/rtd/crate/static/css/crateio.css
+++ b/src/crate/theme/rtd/crate/static/css/crateio.css
@@ -155,11 +155,6 @@ blockquote {
box-shadow: 0 0 18px -4px #000;
}
-.navlink {
- padding-right: 12px;
- padding-left: 12px;
-}
-
.navlink:hover {
color: #111;
}
diff --git a/src/crate/theme/rtd/crate/static/css/custom.css b/src/crate/theme/rtd/crate/static/css/custom.css
index 5543bec6b..21237e6b3 100644
--- a/src/crate/theme/rtd/crate/static/css/custom.css
+++ b/src/crate/theme/rtd/crate/static/css/custom.css
@@ -323,7 +323,6 @@ header .navbar {
}
#menu-main-navigation li > ul li.w-nav-link {
- padding: 0;
display: block;
}
@@ -1633,6 +1632,7 @@ dt:target, span.highlighted {
/* fix ul in header nav */
header#top #menu-main-navigation {
margin: 0;
+ list-style-type: none;
}
/* -- tables ---------------------------------------------------------------- */
@@ -1689,3 +1689,62 @@ th > :last-child,
td > :last-child {
margin-bottom: 0px;
}
+
+/* Main menu styling */
+#menu-main-navigation {
+ list-style: none;
+}
+
+.sub-menu {
+ display: none;
+ position: absolute;
+ top: 100%;
+ left: 0;
+ background-color: #fff;
+ padding: 10px;
+ margin: 0;
+ border: 1px solid #ddd;
+ z-index: 999;
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+}
+
+.menu-item:hover > .sub-menu {
+ display: block;
+}
+
+#menu-main-navigation > .menu-item:first-child > .sub-menu > .menu-item-has-children > .sub-menu {
+ display: none;
+ position: absolute;
+ top: 0;
+ left: 100%;
+}
+
+#menu-main-navigation > .menu-item:first-child > .sub-menu > .menu-item-has-children:hover > .sub-menu {
+ display: block;
+}
+
+.menu-item-has-children .sub-menu {
+ top: 100%;
+ left: 0;
+ position: absolute;
+ display: none;
+}
+
+.menu-item-has-children:hover > .sub-menu {
+ display: block;
+}
+
+.sub-menu li {
+ width: 220px;
+}
+
+.sub-menu a {
+ padding: 8px 8px;
+ display: block;
+}
+
+@media (max-width: 768px) {
+ #menu-main-navigation {
+ display: none;
+ }
+}