Feed Template - Create Search Bar in Header?

Hi there,

I'm looking to have a search bar (essentially like the search block you can add when editing a page) added to the header. I dislike the search icon with this template, as it takes the user to a whole new page, versus being able to search quickly from the homepage.

Does anyone have a suggestion for how to get around this or a code to use to change this feature?

Thank you for your time!

add this code in header box

<div id="block-yui_3_17_2_1_1564113444310_8307" class="yui3-widget yui3-block-base sqs-block-modelsync sqs-block-search sqs-block search-block"><div id="yui_3_17_2_1_1564113444310_8309" class="sqs-block-search-content sqs-block-content"><div class="sqs-search-ui-text-input sqs-search-ui-button-wrapper color-dark" data-source="block" data-preview="true" data-collection="" id="yui_3_17_2_1_1564113444310_8818">
 <div class="spinner-wrapper" id="yui_3_17_2_1_1564113444310_8921" hidden="hidden" style="display: none;"></div>
 <input type="search" class="search-input hover-effect" value="" placeholder="Search">
<div id="yui_3_17_2_1_1564113444310_8809" class="yui3-widget sqs-widget sqs-search-preview"><div id="yui_3_17_2_1_1564113444310_8811" class="sqs-search-preview-content"></div></div></div></div></div>

Thank you for sharing this! Unfortunately, it spans the entire width of the screen and creates a thick white bar along the top of the header. Is there a way to adjust the width and location?

Thank you so much!