Return to expandable search box in nav

Hi there,

I would advise against this as the previous navigation search has some accessibility issues which is why we introduced the search modal feature.

If you still prefer the previous navigation search then try this PHP function:

add_filter( 'option_generate_settings', function( $settings ) {
    $settings['nav_search'] = 'enable';
    return $settings;
} );

Learn how to add PHP: https://docs.generatepress.com/article/adding-php/

Hi there,

the old search field never used to move, it always just appeared over the top of the header.
Do you have a different site that behaves differently ?

Hi there,

I see. If you would like to reposition the Search feature, for reference, can you share the link to the site in question? We’ll see what CSS is needed.

The icon should be appearing by default. This is the searchform.php it uses: https://github.com/tomusborne/generatepress/blob/a4b04b12e1ad6c88c6109f23f196d61895f3d74b/searchform.php#L3

I tried viewing the link you provided but it’s inaccessible. Can you check if it’s correct?

This is what I’m seeing: https://share.getcloudapp.com/7KuWEXkv

Do you want to alter the Search icon? Are you seeing something different?

I see. Add this snippet:

add_filter( 'generate_svg_icon_element', function( $output, $icon ) {
    if ( 'search' === $icon ) {
        $output = '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-hammer" viewBox="0 0 16 16">
  <path d="M9.972 2.508a.5.5 0 0 0-.16-.556l-.178-.129a5.009 5.009 0 0 0-2.076-.783C6.215.862 4.504 1.229 2.84 3.133H1.786a.5.5 0 0 0-.354.147L.146 4.567a.5.5 0 0 0 0 .706l2.571 2.579a.5.5 0 0 0 .708 0l1.286-1.29a.5.5 0 0 0 .146-.353V5.57l8.387 8.873A.5.5 0 0 0 14 14.5l1.5-1.5a.5.5 0 0 0 .017-.689l-9.129-8.63c.747-.456 1.772-.839 3.112-.839a.5.5 0 0 0 .472-.334z"/>
</svg>';
    }
	
    return $output;
}, 10, 2 );

Adding PHP: https://docs.generatepress.com/article/adding-php/#code-snippets

You may replace the SVG code with your preferred SVG.

Yes, you can alter the fill. For instance, you can try adding this through Appearance > Customize > Additional CSS:

span.gp-icon.icon-search svg {
    fill: #ff0000;
    transition: fill .4s ease-in;
}

span.gp-icon.icon-search:hover svg {
    fill: #00ff00;
}

You may replace the values to your liking.

With regard to “add the search to the side of the input”, are you referring to moving the icon to the right of the input box?

If so, try adding this through Appearance > Customize > Additional CSS instead of altering searchform.php:

form.buttonSearch.search-form.navigation-search.nav-search-active button {
    position: absolute;
    right: 0;
    z-index: 10000;
    font-size: 20px;
}

@media (max-width: 1024px){
    form.buttonSearch.search-form.navigation-search.nav-search-active button {
        top: 33px;
        right: 20px
    }
}

This article should help you regarding that: https://docs.generatepress.com/article/generate_svg_icon_element/