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

Does Version 7.1 support a Search Bar/Icon for the site's header?


Recommended Posts

1 hour ago, DPruitt said:

Anyone using Font Awesome, 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. 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}

/*END Custom Search Bar*/

If you're wanting to have it within the navigation instead of the social links, just write your CSS accordingly...

Thank you very much for sharing this. It works! 

Do you know how I can have the search open in the same browser tab? Right now when I click on the search bar icon a new tab opens up on my browser.

Thank you!

Link to post
  • Replies 30
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Popular Posts

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 lo

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 p

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 t

On 8/5/2020 at 12:47 AM, Joseph21 said:

Thank you very much for sharing this. It works! 

Do you know how I can have the search open in the same browser tab? Right now when I click on the search bar icon a new tab opens up on my browser.

Thank you!

-The Process is now updated with Javascript to accomplish same window functionality for the first social link within the header.

Link to post
  • 3 weeks later...
On 8/6/2020 at 1:50 PM, DPruitt said:

-The Process is now updated with Javascript to accomplish same window functionality for the first social link within the header.

Thank you so much!

Link to post
  • 2 weeks later...

DPruitt: Thanks for that helpful bit of code. I successfully used it, but noticed on mobile it's defaulting to the link icon. Is there any additional thing to include in order to have it appear as the favicon?

Link to post
  • 1 month later...
On 8/5/2020 at 4:55 AM, DPruitt said:

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");
      });
</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}

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

Hi DPruitt,

Thanks a lot for sharing this resolution, it works fine!

At the mobile header the icon doens't change, do you know how to solve it?

 

Thanks again for your time,

Tiago

Link to post
On 9/3/2020 at 3:01 PM, FrankVictor said:

additional

 

On 10/15/2020 at 11:06 AM, tiagocristovao said:

Hi DPruitt,

Thanks a lot for sharing this resolution, it works fine!

At the mobile header the icon doens't change, do you know how to solve it?

 

Thanks again for your time,

Tiago

-------------
Code is now updated for mobile*

Link to post

Create an account or sign in to comment

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


×
×
  • Create New...