Add Search Option to Header

Hi! Is there a way to add a search option with an icon in the header? I need my site visitors to able to search older blog posts quickly. Thanks!

4 minutes ago, sian75 said:

Hi! Is there a way to add a search option with an icon in the header? I need my site visitors to able to search older blog posts quickly. Thanks!

Yes, Add the search block in the footer. Then share your website URL. I'll provide code to move the search block on the header.

I have added the search bar to the footer. 

My website url: https://curatress.com/

32 minutes ago, sian75 said:

I have added the search bar to the footer. 

Add these code on Code Injection panel in Website > Utilities > Website Tools > Code Injection. Add on the header section.

<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script>
$(function(){
  let searchBlock = $('.fe-block-yui_3_17_2_1_1705197484910_36207 .sqs-block').attr('id','').addClass('header-search-bar');
  
 $(searchBlock).appendTo($('.header-display-desktop .header-actions--right'));
  $(searchBlock).clone().insertBefore($('.header-menu-actions .header-menu-actions-action'));
  })
</script>

It worked but is there a way to just show the search icon to click on to open and not the whole bar? Thanks!

The search bar didn't look right as I have a very large logo. Is there a way to have just the search icon visible?

Take a look at Will's guide here: https://www.will-myers.com/articles/adding-a-search-icon-to-your-site-header