Off-Canvas Panel - Hover

Hi there,

Hmm I'm not seeing the code being added.

When I add the code using browser inspect, it worked as expected:
https://www.screencast.com/t/ZuZWYMu6o7

Hmmm, thats odd, if I open the stylesheet when viewing source I can see the following CSS:

/wp-content/themes/site-name/style.css?ver=1559685560

#generate-slideout-menu .slideout-menu li:hover > ul,
#generate-slideout-menu .slideout-menu li.sfHover > ul {
display: block;
}

Lines 51 and 52.

Perhaps there is some caching issue?

When I right click on the page and view source, search for #generate-slideout-menu .slideout-menu li:hover > ul, it also returns no result.

Are you adding it directly to the theme's style sheet?

It should be added using one of these methods:
https://docs.generatepress.com/article/adding-css/

Hmmm this is really strange then. I'm using a child theme, there is no caching enabled on the server, I just went into CPanel and checked the stylesheet on the server and the CSS rules are definitely there.
I'm perplexed.

Had to add !important to the rule and it's working now.

Sorry to open this up again. I'm trying to achieve the hover animation this site has on its navigation links: https://www.gleneagles.com/

I've tried using the transition speed method from here: https://docs.generatepress.com/article/navigation-dropdown/#dropdown-menu-transition
But it doesn't quite create the same effect.

It looks as though I'd need the sub-menu to be expanded by default, then hidden by setting a max-height of 0, then change the height when opened with a transition.

Any help appreciated.

I almost have it working with the following CSS, I just need the anchor tags to display at the same time as the drop-down:

.slideout-navigation .sub-menu {
    display: block !important;
    height: auto;
    pointer-events: auto;
    opacity: 1;
    transition: max-height 1s linear;
    max-height: 0;
    overflow: hidden;
}

#generate-slideout-menu .slideout-menu li:hover .sub-menu { 
    max-height: 100px;
}

What about adding this?:

.slideout-navigation.main-navigation.do-overlay .main-nav ul ul li a {
    opacity: 0;
    transition: opacity 500ms ease;
    transition-delay: 1s;
}

.slideout-navigation.main-navigation.do-overlay .main-nav li:hover .sub-menu a {
    opacity: 1;
}

Let me know :)

Thank you Tom, you're a star! Just tweaked the numbers a bit and it's working pretty nicely now!.

Glad I could help :)