[DanHostettler45]

Ernest, yes, please, mark it as resolved. Thanks!

[DanHostettler45]

Hi Ernest,

No worries! And, thanks for the clarification.

I see – so, my assumption was a tad simplistic 🙂 The whole idea of having a separate template was bcs of the page’s styling. But in this case, I will find another way to inject CSS dynamically into the search result page, using our Custom CSS + JS plugin. This will do the trick.

Thanks for all your support!

Best,
Dan

[DanHostettler45]

Hi Ernest,
Thanks for your swift feedback! OK:

Q1) I already used the option of compact box yet since ASP’s DIV is implemented within the MastHead DIV, there’s never enough space on smaller screens. Yet (!), I came up with a workaround, hiding more MastHead elements when under 1024. I updated the JS accordingly and now at least “space-wise” it works. It’s not the most elegant solution, but it does the trick for now. Thanks!

Q2) OK, got it. I missed that! Follow-up up Q here >
Although reading the KB (https://documentation.ajaxsearchpro.com/layout-settings/more-results-link) it’s unclear for me, how to implement the “Redirect to custom URL”.

1. I have created a page/template > https://wordpress-673625-3090857.cloudwaysapps.com/search-results
2. Yet whatever I choose to put into the ” ‘ Show more results..’ url “, I am getting a 404.
3. Pls see my attempts in the following screenshot: https://imgur.com/a/haDJbdC

Thank you,
Dan

[DanHostettler45]

Hi Ernest,

Thank you for your swift reply and the different approaches.

As the shortcode workaround is not feasible here, I will have a look into the filters. I am sure we will find a solution at our end.
Thanks for revealing the 2 filter hooks.

Best;

Dan

[DanHostettler45]

Thanks for your efforts & finished snippet, Ernest.
I got hiding & swap work. All good now. Great! Thanks for bearing with me 🙂

We can consider this ticket as closed.

Best,
Dan

[DanHostettler45]

Thanks for the follow-up, Ernesto!

Meanwhile, I have found a (less elegant) JS solution to hide/bring back the primary menu. As you mentioned, no pure CSS solution possible.
For now, my code looks as follows:

jQuery(document).ready(function() {
	$('.promagnifier').on('click', function(){
		$('#et-menu').toggle();
	});
});

To make the UX flow work, I had to disable “Close on document click”, which means the user has to click on the Search icon again to go back to the original state. Yet…

To make this UX logical, the Search SVG should change to an ‘X’ (or similar) once the state changes. For that, I am still looking for a “swap icon” JS within that same div (.innericon). Any idea for a how-to tackle that the last step, swapping the icon?

Thank you!

[Author]

Posts