How to Customize Navigation Search

GeneratePress includes a Navigation Search option that can be enabled at in Appearance > Customize > Layout > Primary Navigation.

This option adds a search icon (magnifying glass) to your navigation bar which when clicked, shows a semi-transparent search bar covering the menu items for allowing the users to search your site.

This tutorial provides the steps to add a placeholder text to the search input field, remove the opacity, add a background color and border for the search input.

Before:

After:

Step 1

Add the following in either your child theme’s functions.php or in a Code Snippet:

/* Add a Placeholder to navigation search */
add_filter( 'generate_navigation_search_output', function() {
    printf(
        '<form method="get" class="search-form navigation-search" action="%1$s">
            <input type="search" placeholder="Enter your search" class="search-field" value="%2$s" name="s" title="%3$s" />
        </form>',
        esc_url( home_url( '/' ) ),
        esc_attr( get_search_query() ),
        esc_attr_x( 'Search', 'label', 'generatepress' ) 
    ); 
} );

Step 2

Add the following CSS:

/* Navigation search */

.navigation-search input[type="search"] {
    opacity: 1;
    background-color: #fafafa;
    color: #3a3a3a;
    border: 1px solid #ccc;
}

.main-navigation .main-nav ul li.search-item.active > a {
    background-color: transparent;
}

References

Leave a Comment