From c518e03c6c13d7dd1d7360268cce5271ca3c311a Mon Sep 17 00:00:00 2001
From: Mark Eaton <MarkEEaton@users.noreply.github.com>
Date: Thu, 23 Jun 2022 16:01:29 -0400
Subject: [PATCH] make mainnav dropdowns open on hover, with accommodations for
 tablets

---
 groups/home/LibAnswers-4-js-css.html       | 26 +++++++++++++++++++---
 groups/home/LibAnswers-SlideOutChat-4.html |  6 ++---
 2 files changed, 26 insertions(+), 6 deletions(-)

diff --git a/groups/home/LibAnswers-4-js-css.html b/groups/home/LibAnswers-4-js-css.html
index 520d40a..717267f 100644
--- a/groups/home/LibAnswers-4-js-css.html
+++ b/groups/home/LibAnswers-4-js-css.html
@@ -41,8 +41,11 @@ body {
         opacity: 1;
 }
 .fade {
-    -webkit-transition-duration: 5s; /* Safari */
-    transition-duration: 0.5s;
+        -webkit-transition-duration: 5s; /* Safari */
+        transition-duration: 0.5s;
+}
+.dropdown:hover .dropdown-menu {
+        display: block;
 }
 
 /* style the login at the top right */
@@ -273,7 +276,7 @@ a.no-underline { text-decoration: none; }
         }
 }
 
-@media only screen and (min-width: 1px) and (max-width: 768px) {
+@media only screen and (min-width: 1px) and (max-width: 767px) {
 
         #hamburger-alternative { display: none; }
 
@@ -371,6 +374,23 @@ a.no-underline { text-decoration: none; }
 
 </style>
 
+<!-- trigger click event when you hover over dropdowns -->
+<script>
+$(document).ready(function(){
+       // on tablets, trigger the dropdown on touchend, since there is no hover
+       if (navigator.userAgent.match(/iPad/i) != null) {
+               $('.dropdown.main-nav-dropdown').on('touchend', function() {
+                       $(this).click();
+                });
+        } else {
+        // else trigger dropdown on hover
+                $('.dropdown.main-nav-dropdown').hover(function() {
+                        $('.dropdown-toggle', this).trigger('click');
+                });
+        };
+});
+</script>
+
 <!-- scripts to make the Book a Study Room widget run -->
 <script src="https://kbcc-cuny.libcal.com/js/equipment.min.js"></script>
 <script>
diff --git a/groups/home/LibAnswers-SlideOutChat-4.html b/groups/home/LibAnswers-SlideOutChat-4.html
index ad4f054..455e6c2 100644
--- a/groups/home/LibAnswers-SlideOutChat-4.html
+++ b/groups/home/LibAnswers-SlideOutChat-4.html
@@ -78,7 +78,7 @@
                                                 <div class="container-fluid">
                                                                 <ul class="nav navbar-nav" id="navbar-center">
                                                                         
-                                                                        <li class="dropdown">
+                                                                        <li class="dropdown main-nav-dropdown">
                                                                                 <a class="dropdown-toggle ga-main-navbar" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Find It <span class="caret"></span></a>
                                                                                 <ul class="dropdown-menu fade dropdown-margin">
                                                                                         <li>
@@ -146,7 +146,7 @@
                                                                                         </li>
                                                                               </ul>
                                                                         </li>
-                                                                        <li class="dropdown">
+                                                                        <li class="dropdown main-nav-dropdown">
                                                                                 <a class="dropdown-toggle ga-main-navbar" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Services <span class="caret"></span></a>
                                                                                 <ul class="dropdown-menu fade dropdown-margin">
                                                                                         <li>
@@ -200,7 +200,7 @@
                                                                                         </li>
                                                                                 </ul>
                                                                         </li>
-                                                                        <li class="dropdown">
+                                                                        <li class="dropdown main-nav-dropdown">
                                                                                 <a class="dropdown-toggle ga-main-navbar" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">About Us <span class="caret"></span></a>
                                                                                 <ul class="dropdown-menu fade dropdown-margin">
                                                                                         <li>