Header Navigation Hover Effect Disappears Too Quickly

Store Design
, ,
1

Hi Shopify community! I’ve recently incorporated the hover effect to my main navigation bar on my header but when I try to choose from the options, it would disappear before I could even reach it. I tried adjusting the distance to make it closer but it only affects 1 out of 4 of my sections. Are there any workarounds for this? It would definitely make the user’s experience more convenient and efficient. Your help would be much appreciated, thanks in advance and have a great day!

The website for reference: viperarmstactical.com

Here is the code I used to enable the hover effect:

.site-nav--has-dropdown:hover .site-nav__dropdown, 
 .site-nav--has-dropdown:focus .site-nav__dropdown { 
   display: block; 
 } 
 .site-nav__dropdown { top: 30px; }
2

Hi @ViperArms ,

This is Victor from PageFly - Landing page builder, I’d like to suggest this idea:
Step 1: Go to Online Store->Theme->Edit code
Step 2: Asset->/theme.css->paste below code at the bottom of the file:

.site-nav--has-dropdown:hover .site-nav__dropdown, 
.site-nav--has-dropdown:focus .site-nav__dropdown { 
  display: block; 
  transition-delay: 0.5s ; /* add a delay of 0.5 seconds */
} 
.site-nav__dropdown {
  top: 30px !important;
  transition: all 0.3s ease; /* add a transition effect for smoother animation */
}

Hope my answer will help you.

Best regards,

Victor | PageFly

3

It’s working perfectly now, I tweaked the numbers a little bit but the code you gave me definitely made it come to fruition. Thank you very much Victor, I appreciate your help!

To those who will stumble upon this thread in the future, here is the exact code I added with the tweaks I’ve made:

.site-nav--has-dropdown:hover .site-nav__dropdown, 
.site-nav--has-dropdown:focus .site-nav__dropdown { 
  display: block; 
  transition-delay: 0.8s ; /* add a delay of 0.8 seconds */
} 
.site-nav__dropdown {
  top: 26px !important;
  transition: all 0.8s ease; /* add a transition effect for smoother animation */
}