How to change the style of the menu search function

Hi there,

yes, it requires a little bit of code.

1. Add this PHP Snippet to your site:

add_action('generate_inside_navigation', 'db_custom_navigation_search', 10);
add_action('generate_inside_mobile_header', 'db_custom_navigation_search', 10);
function db_custom_navigation_search() {
    printf(
        '<form method="get" class="search-form custom-nav-search" action="%1$s">
            <input type="search" class="search-field" value="%2$s" name="s" title="%3$s" placeholder="%3$s">
            <button class="button">%4$s</button>
        </form>',
        esc_url( home_url( '/' ) ),
        esc_attr( get_search_query() ),
        esc_attr_x( 'Search', 'label', 'generatepress' ),
        generate_get_svg_icon( 'search' )
    );
}

2. Add this CSS:

@media(min-width: 769px) {
    .main-navigation .inside-navigation {
        display: flex;
        align-items: center;
    }
    .main-navigation .inside-navigation .custom-nav-search {
        order: 20;
    }
}

#mobile-header .custom-nav-search {
    order: 20;
    margin: auto;
}

3. In Customizer > General set the Icon Type to SVG