How do I trigger off canvas content using a menu item? I have searched Support but couldn’t find anything specific.
Hi,
To achieve that you can add a class to your menu item.
eg. Add class my-trigger
Then add this in Theme Options > JS
jQuery(function($) {
$( ".my-trigger" ).on( "click", function() {
$("x-off-canvas").addClass("x-active");
});
});
1 Like
Hello, thanks for the quick reply. I tried that but it doesn’t work. How does the trigger know what off canvas content there is to trigger? Why I ask is that I previously had a button set up to trigger off canvas content where I had to add a class to the off canvas element as well. That stopped working since the Pro 2.1 upgrade. This is why I’m trying a new method to trigger the off canvas content. I guess there is a plugin conflict or bug in the new version of Pro (the button that triggered the off canvas broke on 2 upgraded sites). I will investigate further the plugin conflict from my end and let you know.
Hi again,
There is an error in the above code that’s why it isn’t working. Please replace the previous code with the following code:
jQuery(function($) {
$( ".my-trigger" ).on( "click", function() {
$(".x-off-canvas").addClass("x-active");
});
});
Let us know how this goes!
Thanks, I amenend the code. I added an Off Canvas element on the header. I gave it the id “my-target” and then hid it using the CSS code #my-target-anchor-toggle { display:none; }.
The Off Canvas element is now working when the menu item is clicked.
However I can’t close the Off Canvas content with the X button or by clicking the menu item. I saw some code on the Forum but neither worked.
Hi there,
I am not sure what the original Javascript does but it seems that it stops the close event from happening. I suggest that you add the Javascript code below after the code you have and see what happens:
jQuery('.x-off-canvas-close').click(function() {jQuery(this).closest('#my-target-off-canvas').removeClass('x-active')});
I don’t have access to your dashboard that is why I test the code on my browser console on the front end of the website and it is working, but I am not sure if it will work when you add in the dashboard, if it does not get back to us with the credentials of your website.
Thank you.
Thanks. The new code you provided allows me to close the off canvas content using the X button. Is there an option to also close it by clicking anywhere on the screen (outside of the off canvas content)?
Hi again,
Try adding the following code as well:
jQuery(document).ready(function($){
$('body').click(function(){
if($('#my-target-off-canvas').hasClass('x-active')) {
$('#my-target-off-canvas').removeClass('x-active');
}
});
});
Don’t forget to clear your browser’s cache after adding the code. Let us know how this goes!
Sorry that didn’t work and the Off Canvas is no longer being triggered.
Hi there,
That’s not gonna work because event bubbling or propagation could be blocked by any element. I’ll explain it this way
<body>
<some-element>
<off-canvas>
<button> //User click, and closing off canvas works
//User click outside of the button and off the canvas and still works
</some-element>
//User click anywhere outside all other elements but doesn't work, since `<some-element>` blocked the event propagation, and it's programmed to do that.
</body>
I also tried it before (long ago) to close header widgets when the user clicks it outside, and it’s glitchy and doesn’t work most of the time. Once the propagation is blocked, you can’t undo it, unless you’ll unbind the code that blocks it and it’s unpredictable since there are many elements from different plugins and authors.
Thanks for understanding.
Ok so there is no solution to adding an off canvas link to a menu and with the recent update it stopped working using buttons. So I guess I’ll just have to add a off canvas element to the navbar. Not perfect but it will do. Thanks anyway.
You are welcome!
This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.