Delay dropdown menu appearance (debut)

[jessicaaaaaa]

Hi,

Could I please get some help to:

1. delay the appearance and disappearance of the main site dropdown menu when I hover over it, (I've tried to do transitions and transition-delays but to no avail)

2. delay the underline hover appearance for the announcement bar only. (Currently I've managed to delay the underline for the main menu only)

I am using the debut theme

and my site is: http://tenderobjects.co

Thanks!

[paramSoft]

Please place this code at the end of theme.scss

.site-nav__dropdown {
display: block;
    transition: 1s;
    -ms-transition: 1s;
    -o-transition: 1s;
    -moz-transition: 1s;
    visibility: hidden;
    opacity: 0;
}
.site-nav--has-dropdown:hover .site-nav__dropdown {
visibility: visible;
    opacity: 1;
}

.announcement-bar__message
{
    position: relative;
}

.announcement-bar__message:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 0;
  bottom: 0;
  left: 0;
  background-color: #FFF;
  visibility: hidden;
  transition: all 0.3s ease-in-out;
}
.announcement-bar__message:hover:before {
  visibility: visible;
  height: 1px;
}
.announcement-bar__message:hover {
text-decoration: none; 
}

[jessicaaaaaa]

Hi @paramSoft ,

This worked great, however, do I make the dropdown disappear immediately, while keeping the delay when it appears?

Thanks!

[paramSoft]

I do not have idea of it

[VelasArtes]

@jessicaaaaaa Hello, could you expand a little bit on how did you manage to get the menu to dropdown on hover? The tutorials I have been able to find online for the debut theme are very outdated.

Thanks,