diff --git a/docs/theme/mkdocs/css/docs.css b/docs/theme/mkdocs/css/docs.css
index b9fd819c68..b50deb617f 100644
--- a/docs/theme/mkdocs/css/docs.css
+++ b/docs/theme/mkdocs/css/docs.css
@@ -49,6 +49,12 @@ ol li {
   margin: 0px;
   padding: 0em;
 }
+#nav_menu > #docsnav > #main-nav > li > a {
+  color: #253237;
+}
+#nav_menu > #docsnav > #main-nav > li.dd_on_hover > a {
+  color: #5992a3;
+}
 #nav_menu > #docsnav > #main-nav > li.dd_on_hover {
   background: #b1d5df;
   color: #5992a3;
diff --git a/docs/theme/mkdocs/nav.html b/docs/theme/mkdocs/nav.html
index e38989d5eb..e8ea5c75cc 100644
--- a/docs/theme/mkdocs/nav.html
+++ b/docs/theme/mkdocs/nav.html
@@ -4,7 +4,9 @@
       {% for menu in nav %}
       {% if menu.title != '**HIDDEN**' %}
       <li class="dd_menu pull-left{% if menu.active %} active{% endif %}">
-        <span>{{ menu.title }}</span>
+        {% for first_item in menu.children[:1] %}
+        <a href="{{ first_item.url }}">{{ menu.title }}</a>
+        {% endfor %}
         <ul class="dd_submenu" style="max-height: 75px;">
         {% for menu in menu.children %}
           <li {% if menu.active %}class="active"{% endif %}>