Add delay so navigation menu doesn't disappear right away onmouseout

Hi there,

Honestly I’ve never heard anyone mention this before so I think the situation is quite unique to your store. I wonder if you’ve changed the size of the dropdowns at all? Can I see a link?

The dropdowns themselves are handled with CSS, so we won’t be adding a delay. You’d need to write your own custom javascript to handle this.

Thanks

Ah, ok, that makes sense. I’m writing a child theme for Storefront, so yes, I did change the size of the dropdown menu items (I know super-large menus are the trend right now, but when you’ve lots of items in a menu for, say, categories on a photo portfolio site, the menu padding needs trimming in that case). Perhaps I can add a delay for usability with CSS animations?

In case someone else finds this post and is looking to do the same thing (if you have large listings in your menus and wish to reduce Storefront’s default menu item padding). Here’s the tweaked Sass/CSS to add a 0.5s delay to the closing of menus and submenus (also works fine on touch-devices at this media breakpoint too). I put this in my Storefront child theme, the bit that’s being overwritten is in storefront > sass > components > _menu.scss

@media screen and (min-width: 768px) {
  .main-navigation,
  .secondary-navigation {

    ul {
      display: block;
      visibility: visible;
      transition-delay: 0s;

      li {
        &:hover,
        &.focus {
          > ul {
            display: block;
            visibility: visible;
            transition-delay: 0s;
          }
        }
      }

      ul {
        display: block;
        visibility: hidden;
        transition: visibility 0s 0.5s;

        ul {
          left: 100%;
          top: 0;
        }
      }
    }
  }
}