Archived topic
Close Off-Canvas Menu with Custom Menu Built an Element
5 replies · Started by Clayton on November 16, 2021
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.
Hi Clayton,
I'm afraid it's not possible without custom development.
Maybe give the default mobile menu a try?
Bummer
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>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!
No problem. Let us know if you need further help w/ this. :D
