karanmadhok Posted January 14, 2020 Share Posted January 14, 2020 I read that some templates on Squarespace don't support a Search bar/icon for the site's header. I wonder if this is true for Version 7.1 also, which has the same template to support all features. I want to add one search icon with a bar to the header of my site, preferably next to the social icons. But I don't see this option available in the header's settings. Can anyone help? Link to comment
Healsjnr Posted January 15, 2020 Share Posted January 15, 2020 From everything I've read it looks like the move to 7.1 (and removal of specific templates in favour of design styles) means header search is now gone. Same story with the Sidebar. Both features no longer seem to be supported which is super disappointing. The irony is that the Squarespace's own sites use both of these features (header search and sidebar) heavily. They are great features, please bring them back. nwhittlesey, sivdp, magnusmoon and 10 others 12 1 Link to comment
karanmadhok Posted January 15, 2020 Author Share Posted January 15, 2020 Thank you so much for your response, much appreciated. KARAN Link to comment
Guest Posted February 22, 2020 Share Posted February 22, 2020 Also, the search feature can only find blog posts... not text blocks in any section. Since my site is not a blog, it means pretty much ALL of my content does NOT show up in search result. Apparently this is a known bug (according to support), and they are "working on it"... and have been since the launch of 7.1 I find it pretty terrible that they broke the search feature in 7.1 and STILL haven't fixed, let alone that they have launched 7.1 with a broken search feature. Link to comment
caseyh Posted March 25, 2020 Share Posted March 25, 2020 Even more disappointingly, in 7.0, you could add Font Awesome Icons to navigations using Link items. See this search icon which uses this code: <i class="fas fa-search"></i> I've used that method several times to link from the nav or footer to the /search page on a site. In 7.1, it appears that code is now disabled in navigation items altogether, meaning you can't do a lot of things—not even make a nav item bold or italics. That may seem like a small thing but being able to insert code into a nav item (and many other places in SQS) was super useful. A real digression in features. wikid, 44degreesnorth, sehnsuchtstudios and 1 other 4 Link to comment
Meeeee Posted April 4, 2020 Share Posted April 4, 2020 Did anyone find a solution to this search icon feature? plugin maybe? It's pretty important, and I can't believe that mid-enterprise sort of ecommerce companies wouldn't have it. And frankly it's pretty standard across every other single website. sugarkw, aprilatwater, onewildflower and 2 others 5 Link to comment
tuanphan Posted May 16, 2020 Share Posted May 16, 2020 Add link item to Header, then use CSS to make link text to search icon ✌️ mrippstein 1 Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message 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
Mothfood Posted May 26, 2020 Share Posted May 26, 2020 On 5/16/2020 at 4:39 PM, tuanphan said: Add link item to Header, then use CSS to make link text to search icon ✌️ @tuanphan Can you expand upon this? What custom CSS would turn the link text into an icon? I understand how to do this in 7.0 using code injection, but that feature has been removed in 7.1 (which is exceptionally aggravating). I don't personally need to use a search icon in my header, but I do need to use a socials icon (Instagram), as the default way of doing this in 7.1 (Header > Element > Social Links) puts the icon way outside of where it needs to be, and isn't adjustable. sehnsuchtstudios and ezra 2 Link to comment
derricksrandomviews Posted May 26, 2020 Share Posted May 26, 2020 (edited) You can put a link on a 7.1 header/nav bar with the site url followed by a search key, for example https://mydomain.com/search or my own site: https://myrandomviews.com/search Edited May 29, 2020 by derricksrandomviews Link to comment
Mothfood Posted May 27, 2020 Share Posted May 27, 2020 Sure, but that doesn't solve the problem of how to get an icon into the nav bar like you used to be able to do with 7.0 and Font Awesome. Link to comment
tuanphan Posted May 27, 2020 Share Posted May 27, 2020 7 hours ago, Mothfood said: Sure, but that doesn't solve the problem of how to get an icon into the nav bar like you used to be able to do with 7.0 and Font Awesome. 12 hours ago, Mothfood said: @tuanphan Can you expand upon this? What custom CSS would turn the link text into an icon? I understand how to do this in 7.0 using code injection, but that feature has been removed in 7.1 (which is exceptionally aggravating). I don't personally need to use a search icon in my header, but I do need to use a socials icon (Instagram), as the default way of doing this in 7.1 (Header > Element > Social Links) puts the icon way outside of where it needs to be, and isn't adjustable. If your plan is Business or higher, you can use FontAwesome. First add this line to Code Injection Header <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> Next, add Link item to Navigation with name: Search, then share me url, I will give the code to change search text to search icon. Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message 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
Mothfood Posted May 27, 2020 Share Posted May 27, 2020 The URL is currently a placeholder as we work on rebuilding/porting over from a different website builder. Not sure if that will make a difference down the road. For my purposes, I'll be using an Instagram icon rather than a search icon/function, so I've named the Link page in Main Navigation "Social" rather than "Search". Link to comment
tuanphan Posted May 28, 2020 Share Posted May 28, 2020 11 hours ago, Mothfood said: The URL is currently a placeholder as we work on rebuilding/porting over from a different website builder. Not sure if that will make a difference down the road. For my purposes, I'll be using an Instagram icon rather than a search icon/function, so I've named the Link page in Main Navigation "Social" rather than "Search". Your site is private. Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message 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
tuanphan Posted May 29, 2020 Share Posted May 29, 2020 18 hours ago, Mothfood said: My bad. PW is painfully. painfully. is incorrect Add to Home > Design > Custom CSS header#header [href*="instagram"] { visibility: hidden; } header#header [href*="instagram"]:before { content: "\f16d"; font-family: FontAwesome; padding-right: 5px; visibility: visible; } Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message 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
Mothfood Posted May 29, 2020 Share Posted May 29, 2020 Thanks, @tuanphan, that code worked. Unfortunately the way the icon appears in line with the other Page titles on the site is a little awkward. It being so small in juxtaposition with full words throws the spacing off, so I may just leave it as "Social", but I appreciate the opportunity to compare them. Link to comment
Jahhhd Posted June 23, 2020 Share Posted June 23, 2020 I just found this and implemented it on my site. Ziggy 1 Link to comment
Jahhhd Posted June 26, 2020 Share Posted June 26, 2020 On 5/26/2020 at 7:20 PM, derricksrandomviews said: You can put a link on a 7.1 header/nav bar with the site url followed by a search key, for example https://mydomain.com/search or my own site: https://myrandomviews.com/search Would it be possible to do something like this but have it pop up as a lightbox when the link is clicked, rather than bring you to a new page specifically for the search? JoannaR123 1 Link to comment
derricksrandomviews Posted June 26, 2020 Share Posted June 26, 2020 (edited) Not that I am aware of, but that doesn't mean it can't be done. Edited July 12, 2020 by derricksrandomviews Link to comment
Sharad_anand Posted July 12, 2020 Share Posted July 12, 2020 @Jahhhd The video you shared really works. Thanks. Link to comment
deeptivd Posted July 19, 2020 Share Posted July 19, 2020 Do we have any update from SS on when Search feature will be enabled? If not, then can someone help me? I am not a programmer so not sure how to implement the steps given in the video. Link to comment
justsayin Posted July 20, 2020 Share Posted July 20, 2020 Why does Squarespace get so many things right and SO many things wrong? Who's driving this ship?? Seriously NO search? WTF??? aprilatwater and spongebob-smc 2 Link to comment
justsayin Posted July 20, 2020 Share Posted July 20, 2020 I also love how they let us fend for ourselves in these rabbit hole chat rooms and no real team response ever takes place. AnaDavisDesign, spongebob-smc, nenad and 2 others 4 1 Link to comment
Guest Posted July 30, 2020 Share Posted July 30, 2020 And still search in 7.1 does not work (it only indexes blog posts, no other content)... 😞 Link to comment
DPruitt Posted August 5, 2020 Share Posted August 5, 2020 (edited) Anyone using Font Awesome wanting the search icon within the DIV Social Icon Wrapper of the header, here you go: 1. First enable your social links in your header. 2. Add a Link to the beginning of your Social Link List https://www.yourdomain.com/search 3. Add your Font Awesome Script to your Header Injection. 4. Include this Javascript within the Header to make the first link open in the same window: <script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function() { $('.header-actions-action--social a:first-child[target="_blank"]').prop("target", "_self"); $('.header-menu-actions-action--social a:first-child[target="_blank"]').prop("target", "_self"); }); </script> 5. Add your css: /*Custom Search Bar*/ .header-actions--right .header-actions-action--social .icon:first-child {visibility:hidden} .header-actions--right .header-actions-action--social .icon:first-child:after { content: '\f002'; font-family: FontAwesome; position: absolute; margin-left:-1vw; margin-top: 3px; font-size: 15px; color:lightgray; visibility:visible} .sqs-svg-icon--list a:first-child {display:none} /*Mobile*/ .header-menu-actions-action.header-menu-actions-action--social:first-child {visibility:hidden} .header-menu-actions-action.header-menu-actions-action--social:first-child:after {content: '\f002'; font-family: FontAwesome; display: inline-block; position: absolute; margin-left:-15px; margin-top: -25px; font-size: 22px; color:#0db14b; visibility:visible} /*END Custom Search Bar*/ If you're wanting to have it within the navigation instead of the social links, just write your CSS accordingly and leave out the nasty javascript. Edited October 21, 2020 by DPruitt Code Additions kmdesign and tiagocristovao 2 Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment