[Resolved] Off-Canvas Panel – Hover

Home Forums Support [Resolved] Off-Canvas Panel – Hover

Home Forums Support Off-Canvas Panel – Hover

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #920035
    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.

    #920040
    Leo
    Staff
    Customer Support

    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

    #920053
    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.

    #920054
    Leo
    Staff
    Customer Support

    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/

    #920060
    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.

    #920065
    Andy

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

    #920076
    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.

    #920382
    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;
    }
    #920841
    Tom
    Lead Developer
    Lead Developer

    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 ๐Ÿ™‚

    #921010
    Andy

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

    #921164
    Tom
    Lead Developer
    Lead Developer
Viewing 11 posts - 1 through 11 (of 11 total)
  • You must be logged in to reply to this topic.