Jump to content

Search icon in Header for desktop and mobile for Squarespace 7.1

Recommended Posts

  • Replies 7
  • Views 718
  • Created
  • Last Reply

Top Posters In This Topic

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. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.