'Compact Mode' Question: Hiding Primary Navigation?

[DanHostettler45]

Hey Ernest & team,

As mentioned in the pre-sale question, I love the plugin! I purchased now the Pro version in order to use the “slide-function” in the compact mode.
I implemented the search function into my child theme template, all works great, styling too. No bugs.

I do have 2 questions though (CSS, functionality). Please see the full details in the attached PDF.

Thank you!

Best from Prague,
Dan

[Ernest Marcinko]

Hi,

Thank you for your kind words!

1. The plugin changes the asp-compact attribute on the search from “closed” to “open”. So you can detect if the main container is open with this custom CSS:

.asp_m[asp-compact=open] {
    /* styles here */
}

Although I’m afraid you cannot use this to change parent element styles, as currently as far as I know CSS implementation does not have a parent or custom node selector. I think the only possible solution here is use javascript, to perhaps detect a “click” event on the magnifier icon, and then check on the “asp-compact” value after a timeout, and then set the desired element to invisible.

2. This requires some custom javascript coding, starting off with something like this may help:

jQuery(function($){
	$('.proclose').on('mouseup', function(e){ 
		var $e = jQuery(this).closest('.asp_w');
		ASP.instances[$e.data('id') + '_' + $e.data('instance')].closeCompact();
	});
});

[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!

[Ernest Marcinko]

Well, that is bit more difficult, but I would probably use the same event as you used for the menu toggle. Probably inject an element next to the magnifier icon, and style it via custom CSS. Then hide the element on the clicks:

jQuery(document).ready(function($) {
	var open = false;
	$('.promagnifier').on('click', function(){
		$('#et-menu').toggle();
		open = !open;
		$icon = $(this).closest('.asp_w').find('.my-custom-icon');
		if ( $icon.length == 0 ) {
			$(this).after('<div class="my-custom-icon item-hidden"></div>');
		}
		if ( open ) {
			$(this).closest('.asp_w').find('.promagnifier').addClass('item-hidden');
			$icon.removeClass('item-hidden');
		} else {
			$(this).closest('.asp_w').find('.promagnifier').removeClass('item-hidden');
			$icon.addClass('item-hidden');
		}
	});
});

[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

[Ernest Marcinko]

You cannot access this content.

[Author]

Posts