Archived topic
Adding overlay to navigation search bar
7 replies · Started by Tesco on March 30, 2020
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' )
); }Hi there,
It's not possible to filter the toggle right now.
However, you can try this:
document.querySelector( '.search-item' ).addEventListener( 'click', 'ShowHideOverlayer' );
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
Where is ShowHideOverlayer() defined?
sorry...
Just below as stated here:
<script>
document.querySelector( '.search-item' ).addEventListener( 'click', 'ShowHideOverlayer' );
function ShowHideOverlayer() {document.getElementById("overlay").style.display = "block";}
</script>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.
Hi, David.
...not yet... Can you please share the second click solution?
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.
