Replace gp search

Hi there,

if you mean the GP Navigation Search then unfortunately no its not currently possible to replace it.

Let me know if thats what you mean

Yes, that's what I mean.

Do you have a spontaneous idea, how to solve my "issue" with another plugin or something else to make it look more elegant?

I assume Woo events provides a shortcode ( or PHP function ) for the search field ?
If so you can add it inside the Navigation using the inside_navigation hook using the GP Hook Element:

https://docs.generatepress.com/article/hooks-element-overview/

Then if we can see the site i can provide some CSS to position and style it. Note: it WILL NOT use the GP Search Icon to open and close the search field, it will always be visible.

They provide both - it's done with a shortcode.

Hmmm... this is gonna be fun.
Ok in your Hook can you add this code before the Shortcode:

<a href="#" class="custom-search-toggle">
    <svg viewBox="0 0 512 512" aria-hidden="true" role="img" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1em" height="1em">
        <path fill-rule="evenodd" clip-rule="evenodd" d="M208 48c-88.366 0-160 71.634-160 160s71.634 160 160 160 160-71.634 160-160S296.366 48 208 48zM0 208C0 93.125 93.125 0 208 0s208 93.125 208 208c0 48.741-16.765 93.566-44.843 129.024l133.826 134.018c9.366 9.379 9.355 24.575-.025 33.941-9.379 9.366-24.575 9.355-33.941-.025L337.238 370.987C301.747 399.167 256.839 416 208 416 93.125 416 0 322.875 0 208z"></path>
    </svg>
    <svg viewBox="0 0 512 512" aria-hidden="true" role="img" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1em" height="1em">
        <path d="M71.029 71.029c9.373-9.372 24.569-9.372 33.942 0L256 222.059l151.029-151.03c9.373-9.372 24.569-9.372 33.942 0 9.372 9.373 9.372 24.569 0 33.942L289.941 256l151.03 151.029c9.372 9.373 9.372 24.569 0 33.942-9.373 9.372-24.569 9.372-33.942 0L256 289.941l-151.029 151.03c-9.373 9.372-24.569 9.372-33.942 0-9.372-9.373-9.372-24.569 0-33.942L222.059 256 71.029 104.971c-9.372-9.373-9.372-24.569 0-33.942z"></path>
    </svg>
</a>

This will give us our Search Toggle to show and hide it.

Let us know when its added and ill look at the JS and CSS to make it work.

Okay, it's done.

Thanks for your help :)

Before we go the custom javascript route, let's see if we can replace the navigation search with the shortcode.

add_filter( 'generate_navigation_search_output', function() {
    return sprintf(
        '<div class="navigation-search">%s</div>',
        do_shortcode( '[your-shortcode]' )
    );
} );

Let me know what that does :)

Hi Tom,

I added your code and deactivated the previous one.

I think the result is quite near. It needs some styling and it would be great, if the search bar could appear right under the header (on both desktop and mobile) what do you think?

Thanks so far!!

Give this a shot:

.navigation-search {
    top: 100%;
}

Hi Tom,

looks much bettet now - very nice!

Just a few design-issues left:

1. I can't scroll through the ajax search results on mobile (the whole site scrolls instead)

2. Is it possible to to make the search bar fade in or slide in?

3. Is it possible to change the "magnifying glass" icon to a "X" icon to close when the search bar is opened?

4. The blind-text just needs to be adjusted I guess?

Thank you very much, support is amazing!

Should have known Tom would have added a filter :)

Can you disable your Cache so we can look at the other changes

Yeah, the filter did the work quite well :)

WP Rocket is now disabled.

Edit:

Would also be nice to center the search bar on the desktop version.

Hi there,

1. This is because it's set to absolute positioning.. We could make it drop down without being absolute on mobile?:

@media (max-width: 768px) {
    .navigation-search.nav-search-active {
        position: relative;
        order: 20;
    }
}

2. Try this:

.navigation-search {
    opacity: 0;
    transition: opacity 500ms ease;
    visibility: unset;
    left: unset;
}

3. This should do it:

.search-item.active svg:first-child {
    display: none;
}

.search-item.active svg:last-child {
    display: block;
}

4. Which text?

5. To center it, try this:

.navigation-search {
    text-align: center;
}

Thank you very much Tom,

you guys are really amazing - totally solved my issues on this one! :)

One more think to bother you ;)

How do I manage to re-order the mobile header like this:

(Menu to the left, logo centered, search and cart right)