Opening a Content Area of an Off-Canvas element using a Menu item in X/Pro Theme

#1. Add an off canvas element in the Pro Header or the content area of the page.

#2. Add an ID to the element which we will use to target the element with Javascript later.

NOTE: Once you have added an ID to the Content Area Off Canvas element, the ID automatically gets appended with some standard identifier which is -anchor-toggle so the element’s ID in this case becomes #the-off-canvas-anchor-toggle

#3. Add this code in the Global CSS

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

This code hides the default button that launches the off canvas content.

We have added the off canvas content to the page. Now, we will have to add the menu item that will trigger the off canvas content when clicked.

#4. Go to WP Admin > Appearance > Menus then add a Custom Link menu item to the menu where you want to add the link.

#5. We need to assign a class to the newly created menu item so that we can use it to check when the menu item is clicked through the Javascript code we will add in the next steps.

NOTE: If you are not seeing the CSS Classes field, you will need to turn it on from the Screen Options setting that you can find in the top right corner of the page.

#6. We reached the fun part where we will have to write the custom Javascript code that will listen to the clicks made to the menu item and opens the off canvas content.

Add this code in the Global JS area:

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

Once the code is added to the Global JS, the menu item should now trigger the off canvas content area when it is clicked.