[Resolved] Adding overlay to navigation search bar

[Tesco]

Hi,

The search bar on the navigation menu can be very discreet by using some colours and I thought to use an overlay layer activated by a javascript function.

I’ve implemented the overlay div and the custom Javascript codes on separated hooks (which I think is the correct way..?), but I need to place an action on click onclick="ShowHideOverlayer();" on the button that opens the search bar (after class="search-item active close-search sfHover").

Is there a way to do it?

Also, I already use this code to customize the placeholder inside it…

add_filter( 'generate_navigation_search_output','tu_custom_placeholder_on_search_on_navigation' );
function tu_custom_placeholder_on_search_on_navigation() {
printf(
'<form method="get" class="search-form navigation-search" action="%1$s">
<input type="search" placeholder="Enter your search here..." class="search-field" value="%2$s" name="s" title="%3$s"/>
</form>',
esc_url( home_url( '/' ) ),
esc_attr( get_search_query() ),
esc_attr_x( 'Search', 'label', 'generatepress' )
); }

[Tom]

Hi there,

It’s not possible to filter the toggle right now.

However, you can try this:

document.querySelector( '.search-item' ).addEventListener( 'click', 'ShowHideOverlayer' );

[Tesco]

I’ve put this inside my hook (wp_footer) like so:

<script>
document.querySelector( '.search-item' ).addEventListener( 'click', 'ShowHideOverlayer' );
</script>

but is not working…

Something wrong here?

ps – Ideally, this should run onload

[Tom]

Where is ShowHideOverlayer() defined?

[Tesco]

sorry…

Just below as stated here:

<script>
document.querySelector( '.search-item' ).addEventListener( 'click', 'ShowHideOverlayer' );
function ShowHideOverlayer() {document.getElementById("overlay").style.display = "block";}
</script>

[David]

Hi there,

did you resolve this ? It looks to be working to me – although you need to add some code for removing the overlay on second click.

[Tesco]

Hi, David.

…not yet… Can you please share the second click solution?

[Tom]

Try this:

<script>
document.querySelector( '.search-item' ).addEventListener( 'click', function() {
    document.getElementById("overlay").style.display = "block";
} );
</script>

So that will look for an element with the ID “overlay” and display it when you click the .search-item element.

[Author]

Posts