[Resolved] Close Off-Canvas Menu with Custom Menu Built an Element

Home Forums Support [Resolved] Close Off-Canvas Menu with Custom Menu Built an Element

Home Forums Support Close Off-Canvas Menu with Custom Menu Built an Element

  • This topic has 5 replies, 3 voices, and was last updated 2 months ago by Elvin.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #2007084
    Clayton

    Hey guys,

    I’m using a GeneratePress Block Element to create a custom mobile menu using the inside_slideout_navigation which is working like a charm. The issue I’m running in to is that the custom menu items are smooth-scrolling anchor links to sections on the homepage. I think since this is a custom menu the Off-Canvas panel isn’t getting closed when a link is clicked. Any suggestions on how to achieve this? You can take a look at what I mean on mobile here: https://ignitevideostrategy.com/.

    Ideally, the menu will close on mobile whenever a link is clicked inside the inside_slideout_navigation element.

    #2007184
    Ying
    Staff
    Customer Support

    Hi Clayton,

    I’m afraid it’s not possible without custom development.

    Maybe give the default mobile menu a try?

    #2007207
    Clayton

    Bummer

    #2007209
    Elvin
    Staff
    Customer Support

    Hi Clayton,

    If it’s about link toggling the off-canvas menu, maybe I can help.

    Will the behavior be a simple close/open?

    IF that’s the case, try this script:

    <script>
    const OffCanvasPanel = document.querySelector('nav#generate-slideout-menu');
    const htmlTag = document.querySelector('html');
    const bodyTag = document.querySelector('body');
    
    var OffCanvasPanel_btns = OffCanvasPanel.querySelectorAll('a.gb-button.menu-item');
    
    function dbHandleClick(evt) {
        for (var y = 0; y < OffCanvasPanel_btns.length; y++) { 
            if ( OffCanvasPanel_btns[y] == evt.target ) {
                htmlTag.classList.remove('slide-opened');
                bodyTag.classList.remove('offside-js--is-open', 'offside-js--is-left');
                OffCanvasPanel.classList.remove('is-open');
            }
        }
    }
    
    window.addEventListener("click", dbHandleClick);
    </script>

    A wise man once said:
    "Have you cleared your cache?"

    #2007218
    Clayton

    Thanks Elvin, I’ll give that a shot. I found a work around using some code you posted to create a shortcode for any menu so I created a menu, added the items I want, and then added some style. Then I’m outputting the menu in my element. Since I’m now using a default menu the close function seems to be working properly. Thanks again!

    #2007220
    Elvin
    Staff
    Customer Support

    No problem. Let us know if you need further help w/ this. 😀

    A wise man once said:
    "Have you cleared your cache?"

Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.