How do I put a link or toggle for a off canvas content area as a menu item in a collapsed navigation menu?

[AlexSextant]

I made a contact form with gravity forms that appears in a content area off canvas and was able to put the text toggle in the header bar such that it matches the rest of the inline nav links. Unfortunately, when my site is viewed on mobile devices, the inline nav switches to a collapsed nav and I cannot find a way to make the off canvas content area toggle appear in the mobile-only nav menu (collapsed) along with the normal page links.

Is there a way to embed the content toggle as a custom menu link in my menu or another workaround?

[rad]

Hi there,

Thanks for writing in.

That could be possible by adding a menu with a custom link then simply add a javascript code to toggle the off canvas. Example, javascript:jQuery('.off-canvas-toggle').click();. How about provide your site’s URL with this off canvas, then I’ll check if it’s really possible.

Thanks!

[AlexSextant]

I created a workaround, but would like to know the answer to this as it might be better to do it correctly.

[john]

Hey,

Please, could you share with us the workaround created by yourself? This way we can check it and tell you if some modification needs to be made.

[AlexSextant]

I made two toggles, one text with the same formatting as my normal nav links and one that’s an envelope icon. For smaller devices, my nav text links switch to off canvas links that are toggled with the burger icon that matches envelope icon that toggles the off canvas contact form from the opposite side of the page.

It’s not what I had originally envisioned, but it works for now.

If you could tell me how to make the off canvas toggle for the contact form a link in the nav menu, that would be helpful in case I switch it back to what I had originally envisioned (as an item in the nav menu). This is also useful since I wont have to worry about changing the styling twice if I keep the current layout but change the colors or text.

[nabeel]

Hi again,

Add a menu item with a custom link and give it a class for example open-menu (see screenshot) and then add the following jQuery script in your Customizer via Appearance > Customize > Custom > Edit Global Javascript

jQuery(document).ready(function($){
	$('.open-menu').click(function(){
		$('.hm9.x-anchor').click();
	});
});

Hope this helps!