Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Search icon in Header for desktop and mobile for Squarespace 7.1


georgeotsubo

Question

  • Answers 7
  • Created
  • Last Reply

Top Posters For This Question

7 answers to this question

Recommended Posts

  • 0
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? image.thumb.png.7f57d890206bdb1b7b0a173467b4d46c.png

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

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0
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?

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0
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>

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...