[Resolved] How to remplace the 2nd menu by a search bar?

[Stephane]

Hi there

I’m looking for to remplace remplace the 2nd menu by the search bar (with a placeholder inside). This search bar must be full width.

Eg.

View post on imgur.com

Regards

Stef

[David]

Hi there,

go to Appearance > Elements and edit the Hook named: Secondary Navigation
Remove the code within and add this instead:

<div class="custom-search grid-container">
    <form role="search" method="get" id="searchform" class="searchform" action="<?php echo esc_url( home_url( '/' ) ); ?>">
        <label class="screen-reader-text" for="s"><?php _x( 'Search for:', 'label' ); ?></label>
        <input type="text" value="<?php echo get_search_query(); ?>" name="s" id="s" />
        <button type="subimit" id="searchsubmit">
            <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 fill-rule="evenodd" clip-rule="evenodd" d="M208 48c-88.366 0-160 71.634-160 160s71.634 160 160 160 160-71.634 160-160S296.366 48 208 48zM0 208C0 93.125 93.125 0 208 0s208 93.125 208 208c0 48.741-16.765 93.566-44.843 129.024l133.826 134.018c9.366 9.379 9.355 24.575-.025 33.941-9.379 9.366-24.575 9.355-33.941-.025L337.238 370.987C301.747 399.167 256.839 416 208 416 93.125 416 0 322.875 0 208z"></path>
            </svg>
        </button>
    </form>
</div>

Then add this CSS to your site:

.custom-search form {
    display: flex;
}
.custom-search form input {
    flex: 1;
}

[Stephane]

Hi David,

Great!
Last question:how to remplace the search icon by a button “SEARCH”?

[David]

Remove:

<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 fill-rule="evenodd" clip-rule="evenodd" d="M208 48c-88.366 0-160 71.634-160 160s71.634 160 160 160 160-71.634 160-160S296.366 48 208 48zM0 208C0 93.125 93.125 0 208 0s208 93.125 208 208c0 48.741-16.765 93.566-44.843 129.024l133.826 134.018c9.366 9.379 9.355 24.575-.025 33.941-9.379 9.366-24.575 9.355-33.941-.025L337.238 370.987C301.747 399.167 256.839 416 208 416 93.125 416 0 322.875 0 208z"></path>
</svg>

And add SEARCH in its place.

[Stephane]

Wow, the most responsive and efficient of support.
Thx David

[David]

Glad to be of help 🙂

[Author]

Posts