Call mobile overlay with link

Hi @prokops!

Without using JavaScript, you can’t directly trigger a click on another element using just the href attribute in HTML. The href attribute in links is used to navigate to a specific URL or anchor within a document, but cannot directly trigger a click action on another element.

You can use a PHP snippet that adds JavaScript to links with href="#search" a onclick function that opens the mobile overlay after clicking the button. Here is a code:

add_action( 'wp_footer', function() { ?>
	<script type="text/javascript">
		var links = document.querySelectorAll('a[href="#search"]');

		links.forEach(function(link) {
			link.onclick = function() {
				document.querySelector('.js-dgwt-wcas-enable-mobile-form').click();
				return false;
			};
		});
	</script>
<?php }, 9999 );

You have two ways to add this code to your theme:

1. Open the functions.php in your child theme and add the code at the end.
2. or install the Code Snippets plugin and apply this code as a snippet.

Also, you can add this onclick function right to the HTML code by adding this line:

onclick="document.querySelector('.js-dgwt-wcas-enable-mobile-form').click(); return false;"

The link should look similar to this:

<a href="#search" onclick="document.querySelector('.js-dgwt-wcas-enable-mobile-form').click(); return false;">Mobile Search</a>

Regards,
Kris