Search icon in Header for desktop and mobile for Squarespace 7.1

Site URL: https://www.riosgarden.me/

Hi,

I would like to show a search icon on desktop and mobile like this mockup instead of using a search block. Is this possible?
Tapping the search icon can launch a new search page.

What will it happen when click search icon?

Hi @tuanphan I was thinking it could just go to a search page like this? 

On 9/28/2021 at 12:22 PM, georgeotsubo said:

Hi @tuanphan I was thinking it could just go to a search page like this? 

You can add a Link Item on Header with

• Name: Search
• URL: Search page url

Then let me know. We will give the code to replace the text "Search" to search icon

@tuanphan I want the search icon to appear on mobile on the right next to the Site title and not behind the menu icon. Is that possible by adding a link item to the Header?

On 10/1/2021 at 4:35 AM, georgeotsubo said:

@tuanphan I want the search icon to appear on mobile on the right next to the Site title and not behind the menu icon. Is that possible by adding a link item to the Header?

You mean

Burger (left) - Site title (middle) - Search icon (right). Is this right?

On 10/3/2021 at 4:26 AM, tuanphan said:

You mean

Burger (left) - Site title (middle) - Search icon (right). Is this right?

Yes, that is correct

On 10/5/2021 at 11:04 AM, georgeotsubo said:

Yes, that is correct

Add to Settings > Advanced > Code Injection > Footer

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
  $(document).ready(function() { 
		$('div#block-yui_3_17_2_1_1632335709276_4481').appendTo('.header-display-mobile');
	});
</script>
<style>
  .header-display-mobile input {
    padding: 10px 20px !important;
    position: relative;
    left: -50px;
}
  html, body {overflow-x:hidden;}
</style>