[Resolved] Adding overlay to navigation search bar

Home Forums Support [Resolved] Adding overlay to navigation search bar

Home Forums Support Adding overlay to navigation search bar

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #1219355
    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' )
    ); }
    #1219830
    Tom
    Lead Developer
    Lead Developer

    Hi there,

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

    However, you can try this:

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

    #1220084
    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

    #1220158
    Tom
    Lead Developer
    Lead Developer

    Where is ShowHideOverlayer() defined?

    #1220163
    Tesco

    sorry…

    Just below as stated here:

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

    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.

    #1220521
    Tesco

    Hi, David.

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

    #1221057
    Tom
    Lead Developer
    Lead Developer

    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.

Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.