diff --git a/index.html b/index.html
index d620cfd..ce00e86 100644
--- a/index.html
+++ b/index.html
@@ -18,8 +18,8 @@ <h1 class="headingCenter">Climate Ecosystems and Fisheries Initiative Portal</h1
      <div class="tab" role="tabpanel" role="navigation">
           <ul class="nav nav-tabs" id="cefiPortalTabs">
                <li class="active">
-                    <a class="nav-link" href="#overview" data-toggle="tab">Overview
-                         <span class="hoverLabel">Understanding what is CEFI and what regions are covered by CEFI</span>
+                    <a class="nav-link cefiNavbar" href="#overview" data-toggle="tab">Overview
+                         <span class="hoverLabel">What is CEFI?</span>
                     </a>
                </li>
 
@@ -55,9 +55,21 @@ <h1 class="headingCenter">Climate Ecosystems and Fisheries Initiative Portal</h1
                     </ul>
                </li>
 
-               <li><a class="nav-link" href="#cefi_list_search" data-toggle="tab" data-target="#cefi_list_search">Information Hub</a></li>
-               <li><a class="nav-link" href="#cookbooks" data-toggle="tab">Cookbooks</a></li>
-               <li><a class="nav-link" href="#resources" data-toggle="tab">Resources</a></li>
+               <li>
+                    <a class="nav-link" href="#cefi_list_search" data-toggle="tab" data-target="#cefi_list_search">Information Hub
+                         <span class="hoverLabel">Search the CEFI related resources!</span>
+                    </a>
+               </li>
+               <li>
+                    <a class="nav-link" href="#cookbooks" data-toggle="tab">Cookbooks
+                         <span class="hoverLabel">Tutorial of how to use the regional MOM6 output and other resources</span>
+                    </a>
+               </li>
+               <li>
+                    <a class="nav-link" href="#resources" data-toggle="tab">Resources
+                         <span class="hoverLabel">Links to resources</span>
+                    </a>
+               </li>
 
           </ul>
 
diff --git a/index.js b/index.js
index 2aee708..f5f5926 100644
--- a/index.js
+++ b/index.js
@@ -1,13 +1,42 @@
-$(".navDropdown").on('click',function(){
-    var isExpanded = $("#dropdownMaps").attr("aria-expanded");
-    // console.log('aria-expanded is'+isExpanded);
+const delay = ms => new Promise(res => setTimeout(res, ms));
+
+
+$(".navDropdown").on('click',async function() {
+    await delay(10); // wait 5 ms for the boostrap code to work and execute the rest
+
+    $(".navDropdown").parent().closest('li.dropdown').each(function() {
+        if ($(this).hasClass('open')) {
+            $(this).children('.navDropdown').children('span.hoverLabel').addClass('hidden')
+        } else {
+            $(this).children('.navDropdown').children('span.hoverLabel').removeClass('hidden')
+        }
+    })
     
-    // the false and true is lagging the click so the logic is reversed
-    if (isExpanded === "false") {
-        $(this).children('span.hoverLabel').addClass('hidden')
-    } else if (isExpanded === "true") {
-        $(this).children('span.hoverLabel').removeClass('hidden')
-    } else {
-    console.log("The aria-expanded attribute is not explicitly set.");
-    }
+    // var dropDownMenuID = $(this).attr('id')
+    // var dropDownTab = $('#'+dropDownMenuID).parent().closest('li.dropdown');
+
+    // await delay(100); // wait 5 ms for the boostrap code to work and execute the rest
+
+    // if (dropDownTab.hasClass('open')) {
+    //     $('#'+dropDownMenuID).children('span.hoverLabel').addClass('hidden')
+    //     console.log('The element has the class "open".');
+    // } else {
+    //     $('#'+dropDownMenuID).children('span.hoverLabel').removeClass('hidden')
+    //     console.log('The element does not have the class "open".');
+    // }
+
+    // var dropDownTabs = $(".navDropdown").parent().closest('li.dropdown');
+
+    
+    // var isExpanded = $("#dropdownMaps").attr("aria-expanded");
+    // // console.log('aria-expanded is'+isExpanded);
+    
+    // // the false and true is lagging the click so the logic is reversed
+    // if (isExpanded === "true") {
+    //     $(this).children('span.hoverLabel').addClass('hidden')
+    // } else if (isExpanded === "false") {
+    //     $(this).children('span.hoverLabel').removeClass('hidden')
+    // } else {
+    // console.log("The aria-expanded attribute is not explicitly set.");
+    // }
 })