Open Content Area off Canvas from menu

[cmelnik]

Hi,
How can I open a Content Area Off Canvas from a menu item?

I have a basic inline menu and would like to add “contact” as one of the menu choices that will open off canvas Content Modal containing a form. I was able to achieve this for a button but am unsure how to do so from a menu item.

Please advise.

Thank you

[jade]

Hi @cmelnik,

This will involve a bit of customization. Please follow these steps:

#1 Add an ID to the Content Area Off Canvas element which we will use later to target the element through a Javascript code.

Assuming that the ID you have added to the element is the-off-canvas, you will need to use the-off-canvas-anchor-toggle as the ID of the toggle for the off canvas element.

#2 Create the menu item (custom link) that will trigger the click then add a class to the menu item.

If you are not seeing the CSS Classes field, make sure to enable it from the Screen Options setting that is in the top right part of the page.

#3 Add this code in X > Theme Options > JS:

(function($){

	$( ".off-canvas-trigger" ).on( "click", function() {
  	$("#the-off-canvas-anchor-toggle").trigger("click");
  });

})(jQuery);

Lastly, to hide the default button trigger of the off canvas element, add this code in the global CSS:

#the-off-canvas-anchor-toggle {
    display: none;
}

Kindly note that since this is a custom code that changes the default behavior/display of the theme, you will be responsible to maintain or update the code in case you require further changes or if the code stops working in future updates. If you are uncertain how to proceed, it would be best to get in touch with a developer.

Hope this helps.