jpwv 368 Share Posted April 16, 2014 (edited) How can I add a Search Block to the top of the site, in or near the header? Thanks. Edited August 15, 2016 by Testing2134 retag Pixelfreez, Maxy21, Scoobie and 1 other 4 Link to post
0 geekgirlweb1570047771 0 Share Posted July 22, 2014 You can add a search bar with the Search Block and add it when you're in Style Mode, no code required:http://help.squarespace.com/guides/using-the-search-block#toc-add-the-search-block Link to post
6 Scoobie 16,457 Share Posted August 8, 2014 (edited) Squarespace have reengineered the Search Block and there's a way to put it in the header/top level navigation using the dedicated search page yourwebsite.com/search and add a link page with that search address to your top level navigation. Credit to @SquarespaceGuru for this tip, check out write up which explains it better and subscribe to his newsletter, Squarespace Updates the Search Block and Squarespace: Using the Search Block. Note: If you have an old Search Block you may need to delete it and add a new Search Block to get it to work. Edited August 8, 2014 by scoobie Link to post
0 SquarespaceGuru 3,681 Share Posted August 11, 2014 Thanks @scoobie for sharing! I run the Squarespace Guru blog (www.sqsp.guru) and host the Squarespace Guru podcast. Link to post
0 jpwv 368 Author Share Posted December 14, 2014 A Search Block can be added to the footer using the standard editing tools. Link to post
0 SquarespaceGuru 3,681 Share Posted December 15, 2014 Yes, but the question was specifically for the header. You can't use the standard editing tools to add content blocks to the header. A bit of trickery is needed for that! :) I run the Squarespace Guru blog (www.sqsp.guru) and host the Squarespace Guru podcast. Link to post
0 jpwv 368 Author Share Posted December 15, 2014 Yes, that is correct. However, having it in the footer can be a temporary work around until you can figure out the trickery you need to get it into the header. Link to post
0 colin.irwin 17,548 Share Posted December 15, 2014 (edited) Am I missing something @SquarespaceGuru, or does your method simply add a link to the search page to the menu bar rather than have a functioning search input box in the menu bar? @jpwv I use a hybrid approach: add a link to Search to the menu bar and a search block in the footer. Then use script and custom css to replace the link with the search block and style it nicely. This gives a fully functioning search input box in the menu bar. See http://www.silvabokis.com/ Edited December 15, 2014 by silvabokis Please hit LIKE to share your appreciation of posts that are helpful or useful. The like button is somewhere over there Of course, Likes don't pay the bills.. If you're looking for a Squarespace Developer you can hire me here Link to post
0 jpwv 368 Author Share Posted December 15, 2014 silvabokis: The issue is the script and custom css. Are you willing to share?Is this the code you are talking about? http://www.silvabokis.com/news-views/2013/4/10/jvw4vybhjdmquivptb5sbo8tfw3c3q?rq=search Link to post
5 colin.irwin 17,548 Share Posted December 15, 2014 Here's how I did it on my site, which uses the Aviator template. NB. The specific targeting for the scripts and css to work vary from template to template. First create a link as the last item in your main navigation. This link can be to anything, but calling it Search and linking to /search keeps things tidy. Next create a search block in your site footer. Then add the following script to your sitewise code injection point. <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script> $(".cf li:nth-last-child(1) a").replaceWith($(".search-block")); </script> This replaces the last item in the site navigation with the search box. Finally, add some css to the custom css editor to tidy things up .sqs-block-search { padding-top:0 !important; padding-bottom:0 !important; } .cf li{ vertical-align:middle; } .search-input { background-color: white !important; max-width:200px; } .search-input::-webkit-input-placeholder { color: black; } .search-input:-moz-placeholder { /* Firefox 18- */ color: black; } .search-input::-moz-placeholder { /* Firefox 19+ */ color: black; } .search-input:-ms-input-placeholder { color: black; } Please hit LIKE to share your appreciation of posts that are helpful or useful. The like button is somewhere over there Of course, Likes don't pay the bills.. If you're looking for a Squarespace Developer you can hire me here Link to post
0 colin.irwin 17,548 Share Posted December 15, 2014 (edited) Hi, I just wrote it up in an Answer on this thread. Oh.. ..and the code you found was something specific for a user from a long time ago, before the standalone search page existed. Edited December 15, 2014 by silvabokis Please hit LIKE to share your appreciation of posts that are helpful or useful. The like button is somewhere over there Of course, Likes don't pay the bills.. If you're looking for a Squarespace Developer you can hire me here Link to post
0 awebster 0 Share Posted December 20, 2014 Nice workaround @silvabokis but unfortunately I tried implementing this through the Avenue template and no luck. Do you have any suggestions as to how I could adjust the script to suit this template? I'm currently having to add the search block into the header of every new page I create but have run into a road block with doing so using the index page, no header edit options given. Cheers! http://www.boomandbloom.co.nz Link to post
0 awebster 0 Share Posted December 21, 2014 Had another play around with this and got it to work in Avenue by replacing ".cf li:nth-last-child(1)" with "nav li:nth-last-child(1)". Currently active on http://www.boomandbloom.co.nz. Only issue is that the search also replaces the last link in my dropdown menu. Any thoughts? Link to post
0 colin.irwin 17,548 Share Posted December 21, 2014 Hi - the following should work. $(".main-nav ul > li:nth-last-child(1) a").replaceWith($(".search-block")); Please hit LIKE to share your appreciation of posts that are helpful or useful. The like button is somewhere over there Of course, Likes don't pay the bills.. If you're looking for a Squarespace Developer you can hire me here Link to post
0 colin.irwin 17,548 Share Posted December 23, 2014 (edited) SEARCH IN MAIN NAVIGATION - FIVE TEMPLATE NB. I haven't applied this to a site - I've deduced the code by looking at the code of a site that uses the Five template. Please confirm and accept the answer if you apply it and it works. If there are any problems, post them as comments to this answer and I'll try to apply fixes. First create a link as the last item in your main navigation. This link should be called Search and link to /search as it appear as a link rather than an input box in the mobile navigation. Next create a search block in your site footer. Then add the following script to your sitewise code injection point. <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script> $("nav#main-navigation > ul > li:nth-last-child(1) a").replaceWith($(".search-block")); </script> This replaces the last item in the site navigation with the search box. Finally, add some css to the custom css editor to tidy things up .sqs-block-search { padding-top:0 !important; padding-bottom:0 !important; } nav#main-navigation > ul li { vertical-align:middle; } .search-input { background-color: white !important; max-width:200px; } .search-input::-webkit-input-placeholder { color: black; } .search-input:-moz-placeholder { /* Firefox 18- */ color: black; } .search-input::-moz-placeholder { /* Firefox 19+ */ color: black; } .search-input:-ms-input-placeholder { color: black; } Edited December 23, 2014 by silvabokis Please hit LIKE to share your appreciation of posts that are helpful or useful. The like button is somewhere over there Of course, Likes don't pay the bills.. If you're looking for a Squarespace Developer you can hire me here Link to post
1 colin.irwin 17,548 Share Posted December 23, 2014 @Sartorial I have posted an answer for you elsewhere on this thread. Please hit LIKE to share your appreciation of posts that are helpful or useful. The like button is somewhere over there Of course, Likes don't pay the bills.. If you're looking for a Squarespace Developer you can hire me here Link to post
0 awebster 0 Share Posted December 23, 2014 Thanks for that. The last item in my dropdown menu is still also replaced with the search block but not the end of the world. Cheers Link to post
1 colin.irwin 17,548 Share Posted December 24, 2014 In that case, try $(".main-nav > ul > li:nth-last-child(1) a").replaceWith($(".search-block")); Please hit LIKE to share your appreciation of posts that are helpful or useful. The like button is somewhere over there Of course, Likes don't pay the bills.. If you're looking for a Squarespace Developer you can hire me here Link to post
0 Sartorial 12 Share Posted December 24, 2014 (edited) Thank you kindly for the quick response. Unfortunately however it appears to leave the Search field in the footer but restyles it whilst SEARCH still remains in the navigation bar. Edited December 24, 2014 by Sartorial Link to post
0 awebster 0 Share Posted December 25, 2014 Works perfectly! Appreciate the help. Thanks! Link to post
0 SquarespaceGuru 3,681 Share Posted December 25, 2014 @silvabokis You're not missing anything, my method does add a link to the main navigation. Most people asking questions on this forum couldn't even begin to implement a solution like yours. That's not a snub to anyone, it's just the truth. Major js & css tweaks are necessary for a functioning search bar in the header. Not to mention it looks so 1997. Swifttype has the perfect solution, but who really wants to pay $100/mo. My solution is a perfect fit for most. I run the Squarespace Guru blog (www.sqsp.guru) and host the Squarespace Guru podcast. Link to post
0 Sartorial 12 Share Posted December 29, 2014 Can't seem to get @SquarespaceGuru 's wonderful search icon to work on my navigation in Five? Still shows SEARCH as text in the nav bar after I have put the link to the FontAwesome icon in the header code injection. Any ideas? Link to post
0 Guest Share Posted January 6, 2015 Hi there,Im also wanting to add a search block to my header but im using the pacific template and this CSS code doesnt work for me. It sits in the footer too. Does anyone know the right trickery for the pacific template (the scrolling page) Thanks! Link to post
0 Guest Share Posted January 6, 2015 Hi there,Im also wanting to add a search block to my header but im using the pacific template and this CSS code doesnt work for me. It sits in the footer too. Does anyone know the right trickery for the pacific template (the scrolling page) Thanks! Link to post
0 arthurm 47 Share Posted February 19, 2015 None of these are working for the Marquee Template :-( any help would be much appreciated! Link to post
Question
jpwv 368
How can I add a Search Block to the top of the site, in or near the header? Thanks.
Edited by Testing2134retag
Link to post
Top Posters For This Question
11
7
4
Popular Days
Feb 19
7
Feb 28
6
Dec 15
6
Dec 23
4
Top Posters For This Question
colin.irwin 11 posts
jpwv 7 posts
awebster 4 posts
Popular Days
Feb 19 2015
7 posts
Feb 28 2015
6 posts
Dec 15 2014
6 posts
Dec 23 2014
4 posts
56 answers to this question
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment