[Support request] How to change the style of the menu search function

Home Forums Support How to change the style of the menu search function

  • This topic has 1 reply, 2 voices, and was last updated 3 months ago by David.
Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #1329567
    Julia

    Hi, I want to change the style of the menu search function. The style I want you can take a look at the image I give you.

    #1329662
    David
    Staff
    Customer Support

    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

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