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!