[Resolved] Off-Canvas Panel – Hover

[Andy]

Hi,
I’m using the CSS from the following thread to enable revealing the sub-menu on hover for the Off-Canvas Panel, but it’s not working for me: https://generatepress.com/forums/topic/off-canvas-panel-hover/

I have Navigation Dropdown set to Hover for the Primary Navigation settings.

Any idea what am I doing wrong?

Thanks.

[Leo]

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

[Andy]

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.

[Leo]

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/

[Andy]

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.

[Andy]

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

[Andy]

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.

[Andy]

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;
}

[Tom]

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 🙂

[Andy]

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

[Tom]

Glad I could help 🙂

[Author]

Posts