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

Home Forums Support How to remplace the 2nd menu by a search bar?

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #1301652
    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

    #1301758
    David
    Staff
    Customer Support

    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;
    }
    #1301918
    Stephane

    Hi David,

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

    #1301924
    David
    Staff
    Customer Support

    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.

    #1301930
    Stephane

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

    #1301934
    David
    Staff
    Customer Support

    Glad to be of help 🙂

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