Customization to Default Search

Hi there,

Onclick actions are JS codes. This kind of customization is out of our scope.

For the actual search button:

The site you've linked seemed to have added the search icon as a menu item.

Here's how you can add icons to the menu.
https://docs.generatepress.com/article/adding-icons-to-menu-items/

The documentation suggested font icons like <i class="fas fa-home" aria-hidden="true"></i> but you can use <svg>...</svg> if you want. Make sure to add a unique class to this menu item for scripting.

Once placed, you should be able to target this icon you've added to the menu with your onclick script using the unique class selector you've assign to the menu item.

Thanks Elvin! Definitely understand what your saying on JS. I'll see how I do today on your suggestion and post back. Thanks for the input.

No problem. Let us know if you have further questions. :)

Hi Elvin. I wanted to circle around on this and let you know I think I found a solution. You can visit the site via the private window.

Last question on this:

Is there a way to add an "X" to be able to clear the search field? In the screen capture available in the private window, I used a green "x" to show you were I was wanting to place it.

Thanks again,

Mike

This is a bit tricky to do as this will also require a script and you'll need to filter the navigation search output as well to insert your X button.

This is just an example:

The script hooked to footer. (This clears the search value)

add_action( 'wp_footer', function () { ?>
<script>
function clearSearch(){
var searchForm = document.querySelector('input[type="search"]');
searchForm.value = '';
}
</script>
<?php } );

The PHP snippet to filter adding X button.

add_filter( 'generate_navigation_search_output', function() {
    printf( // WPCS: XSS ok, sanitization ok. 
        '<form method="get" class="search-form navigation-search" action="%1$s"> 
			<div class="form-element-wrapper">
			<div class="input-and-close">
            <span class="clear-btn" aria-label="Clear Search Bar" onclick="clearSearch()">
                    <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>
                
            </span>
            <input type="search" class="search-field" value="%2$s" name="s" title="%3$s" />
			</div>
			<button type="submit">Search</button>
			</div>
        </form>', 
        esc_url( home_url( '/' ) ), 
		esc_attr( get_search_query() ),
        esc_attr_x( 'Search', 'label', 'generatepress' ) );
} );

Note: If you've already filtered the navigation search before. Cross-reference this code with your current one and try to merge the 2. I see you seem to have used one already when you add the "search" button.

You then add this CSS for the layout.

.form-element-wrapper {
    display: flex;
    flex-direction: row;
    position: fixed;
    align-items: center;
    align-content: center;
}

.form-element-wrapper .input-and-close {
    display: flex;
    align-content: center;
    align-items: center;
    position: relative;
}

.form-element-wrapper .input-and-close .clear-btn {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translate(0, -50%);
    z-index: 99;
}

.form-element-wrapper .input-and-close .clear-btn svg {
    fill: green;
}

Thanks for the details on this Elvin. I really appreciate it. I'll give it a whack and let you know how it goes.

No problem. Let us know how it goes.