Change the header dropdown menu to open on click instead of hover.

Site URL: https://dandelion-antelope-pwty.squarespace.com

I had an accessibility check run on this site and one of the main issues I'm working on for users who need screen readers is the navigation menu. Originally, I had a built-in dropdown menu on hover, but I was informed that screen readers stopped at the main item (which is just a folder, not an actual linked page) and wouldn't read the actual links to pages. One of their suggestions was either to A) make the drop-down open on click, which customer service told me is impossible or B) make a mega menu using custom code, which I have done, but it still only opens on hover.

I would prefer to use my original menus because I'm skeptical of the custom mega menu being accessible on a screen reader, is there a way to override the hover function with an html injection?

12 hours ago, Hannah96 said:

Site URL: https://dandelion-antelope-pwty.squarespace.com

I had an accessibility check run on this site and one of the main issues I'm working on for users who need screen readers is the navigation menu. Originally, I had a built-in dropdown menu on hover, but I was informed that screen readers stopped at the main item (which is just a folder, not an actual linked page) and wouldn't read the actual links to pages. One of their suggestions was either to A) make the drop-down open on click, which customer service told me is impossible or B) make a mega menu using custom code, which I have done, but it still only opens on hover.

I would prefer to use my original menus because I'm skeptical of the custom mega menu being accessible on a screen reader, is there a way to override the hover function with an html injection?

Your site is still private now. Kindly give it a protected password to check your issue together

On 12/2/2021 at 2:55 PM, Hannah96 said:

Site URL: https://dandelion-antelope-pwty.squarespace.com

I had an accessibility check run on this site and one of the main issues I'm working on for users who need screen readers is the navigation menu. Originally, I had a built-in dropdown menu on hover, but I was informed that screen readers stopped at the main item (which is just a folder, not an actual linked page) and wouldn't read the actual links to pages. One of their suggestions was either to A) make the drop-down open on click, which customer service told me is impossible or B) make a mega menu using custom code, which I have done, but it still only opens on hover.

I would prefer to use my original menus because I'm skeptical of the custom mega menu being accessible on a screen reader, is there a way to override the hover function with an html injection?

Hi there! Here is a snippet of CSS and JS that worked for me. Just copy & paste this into your website footer Code Injection via Settings > Advanced > Code Injection > Footer:

If anyone reading this is in need of a Mega Menu that is completely ADA compliant and Web-Accessible, I have one available for purchase on my website! (this is not an affiliate link, but I am the creator of the plugin)

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<style>
  .header-nav-item.header-nav-item--folder:hover .header-nav-folder-content {
    opacity: 0;
    pointer-events: none !important;
  }
  .header-nav-folder-content {
    opacity: 0;
    pointer-events: none;
    transition: all .2s;
  }
  .header-nav-folder-content.showDropdown {
    opacity: 1 !important;
    pointer-events: auto !important;
  }
  .header-nav-folder-content.showDropdown .header-nav-folder-item {
    pointer-events: auto;
  }
</style>

<script>
  $(document).ready(function() {
    $(".header-nav-item.header-nav-item--folder").on("click", function() {
      if ($(this).find(".header-nav-folder-content").hasClass("showDropdown")) {
        $(this).find(".header-nav-folder-content").removeClass("showDropdown");
      } else {
        $(".header-nav-item.header-nav-item--folder .header-nav-folder-content").removeClass("showDropdown");
        $(this).find(".header-nav-folder-content").addClass("showDropdown");
      }
    });

    $("body").click(function(e) {
      if ($(".header-nav-folder-content.showDropdown").length > 0 && e.target.closest(".header-nav-item--folder") == undefined && !Array.from(e.target.classList).includes("header-nav-folder-content") && e.target.closest(".header-nav-folder-content") == undefined) {
        $(this).find(".header-nav-folder-content").removeClass("showDropdown");
      }
    });
  });
</script>

@Caroline_Smith OMG thank you for this!! is there anyway to add a transition to this? 
Like https://chainsocial.com.au/