Help with CSS for alternative search function

Hi everyone, 

As I've seen all over the forum, the search facility doesn't seem to accurate - as I'm experiencing too here: https://www.probation-institute.org

I've been looking at Elfsight as an alternative, which seems to do the trick. I'd really welcome some help positioning and styling it properly and embedding in the header please. 

At present it is positioned at the bottom right of the page, with CSS they provided, as you'll see on the screenshot. 

Ideally, I'd like it exactly where the SS search is at the top right in the header and styled the same if possible. I don't want it to stand out too much and just blend into the header. 

The other issue is making sure it looks ok on the mobile version, so again trying to replicate what is there on the current mobile version with just the icon please - see attached.

Any ideas I'd be very grateful. 

Thanks, Richard

Hey @tuanphan I think you’ve suggested a few CSS options for Elfsight before. I’d really value your help please. 

Can you send Elfsight code you used? We can test it easier

Sure, this is in the footer of the code injection: 

<script src="https://static.elfsight.com/platform/platform.js" data-use-service-core defer></script>

<div class="elfsight-app-3d11d10a-b7b7-4bc3-a662-b1825ec634bf"></div>

This is the CSS directly attributed to the button in the Elfsight set up: 

.global-styles,

[class^='FloatingButton__Container-sc'] {

            top: auto !important;

            bottom: 16px;

}

Thank you 🙂

Try adding this code to Last Line in Code Injection > Footer

<script>
  $(document).ready(function(){
    $('<div class="elfsight-app-3d11d10a-b7b7-4bc3-a662-b1825ec634bf"></div>').appendTo('[data-nc-container="top-right"]');
});
</script>

If it doesn't work, keep that code & remove this line

Thank you @tuanphan, I've tried both suggestions and no luck I'm afraid. This is the full CSS if it helps. 

Current code injection: 

<script src="https://static.elfsight.com/platform/platform.js" data-use-service-core defer></script>
<div class="elfsight-app-3d11d10a-b7b7-4bc3-a662-b1825ec634bf"></div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
  jQuery(document).ready(function($) { 
   $('<div class="Header-nav-inner"><a href="https://www.probation-institute.org/how-to-join" class="Header-nav-item">JOIN HERE</a></div>').appendTo('nav.Header-nav.Header-nav--secondary');
    $('<div class="Header-nav-inner"><a href="https://www.probation-institute.org/donate" class="Header-nav-item">DONATE</a></div>').appendTo('.Mobile [data-nc-container="top-center"]');
 }); 
</script>
<style>
  nav.Header-nav.Header-nav--secondary a {
    white-space: nowrap;
}
  .Mobile [data-nc-container="top-center"] {
    display: flex !important;
}
  .Mobile [data-nc-container="top-center"] a {
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
    font-weight: 500 !important;
    border: 0;
    background-color: #0a579f;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: #fff;
    border-radius: 30px;
    padding: 9px 12px;
    margin: 0.618em 0.618em;
 
  }

</style>

<style>
  /* Hide join here orange button */
@media screen and (min-width:641px) {
    div#block-yui_3_17_2_1_1590057489722_4915 {
    display: none;
}
}

/* hide mobile donate button */
nav.Mobile-overlay-nav.Mobile-overlay-nav--secondary {
    display: none;
}
</style>

Button CSS in Elfsight 

.global-styles,

[class^='FloatingButton__Container-sc'] {

            top: auto !important;

            bottom: 16px;

}

On 8/19/2023 at 5:11 PM, RichardR said:

Thank you @tuanphan, I've tried both suggestions and no luck I'm afraid. This is the full CSS if it helps. 

Current code injection: 

<script src="https://static.elfsight.com/platform/platform.js" data-use-service-core defer></script>
<div class="elfsight-app-3d11d10a-b7b7-4bc3-a662-b1825ec634bf"></div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
  jQuery(document).ready(function($) { 
   $('<div class="Header-nav-inner"><a href="https://www.probation-institute.org/how-to-join" class="Header-nav-item">JOIN HERE</a></div>').appendTo('nav.Header-nav.Header-nav--secondary');
    $('<div class="Header-nav-inner"><a href="https://www.probation-institute.org/donate" class="Header-nav-item">DONATE</a></div>').appendTo('.Mobile [data-nc-container="top-center"]');
 }); 
</script>
<style>
  nav.Header-nav.Header-nav--secondary a {
    white-space: nowrap;
}
  .Mobile [data-nc-container="top-center"] {
    display: flex !important;
}
  .Mobile [data-nc-container="top-center"] a {
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
    font-weight: 500 !important;
    border: 0;
    background-color: #0a579f;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: #fff;
    border-radius: 30px;
    padding: 9px 12px;
    margin: 0.618em 0.618em;
 
  }

</style>

<style>
  /* Hide join here orange button */
@media screen and (min-width:641px) {
    div#block-yui_3_17_2_1_1590057489722_4915 {
    display: none;
}
}

/* hide mobile donate button */
nav.Mobile-overlay-nav.Mobile-overlay-nav--secondary {
    display: none;
}
</style>

 

Button CSS in Elfsight 

.global-styles,

[class^='FloatingButton__Container-sc'] {

            top: auto !important;

            bottom: 16px;

}

I will check it again. In the meantime, You try posting this to Elfsight Forum, their support is great. They are ready to help with code related issues.

7 hours ago, tuanphan said:

I will check it again. In the meantime, You try posting this to Elfsight Forum, their support is great. They are ready to help with code related issues.

Thanks @tuanphan I've sent a support request, not sure how quickly they respond. 

Ah got it. First, keep this Elf code in Code Injection

Next, add it to Last Line in Code Injection > Footer

<script>
  $(document).ready(function(){
    setTimeout(function(){
	 $('div[class*="FloatingButton__Container"]').appendTo('[data-nc-container="top-right"]');
},3000); 
});
</script>
<style>
  .eaSXfB {
    position: static !important;
    margin-left: 20px;
}
  .Header-search {
    display: none;
}
</style>

3 hours ago, tuanphan said:

Ah got it. First, keep this Elf code in Code Injection

Next, add it to Last Line in Code Injection > Footer

<script>
  $(document).ready(function(){
    setTimeout(function(){
	 $('div[class*="FloatingButton__Container"]').appendTo('[data-nc-container="top-right"]');
},3000); 
});
</script>
<style>
  .eaSXfB {
    position: static !important;
    margin-left: 20px;
}
  .Header-search {
    display: none;
}
</style>

Thank you @tuanphan. This sometimes works on mobile, the search appears across the whole of the bottom of the screen then jumps to the top. 

On desktop, similar in that it appears across the bottom but it then disappears altogether (see screenshots). Tried in multiple browsers. 

I'm keen to make it look the same as the Squarespace search function too, small and discreet. 

Full code injection  I used below (though I've taken the section in italics out for now)

<script src="https://static.elfsight.com/platform/platform.js" data-use-service-core defer></script>
<div class="elfsight-app-3d11d10a-b7b7-4bc3-a662-b1825ec634bf"></div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
  jQuery(document).ready(function($) { 
   $('<div class="Header-nav-inner"><a href="https://www.probation-institute.org/how-to-join" class="Header-nav-item">JOIN HERE</a></div>').appendTo('nav.Header-nav.Header-nav--secondary');
    $('<div class="Header-nav-inner"><a href="https://www.probation-institute.org/donate" class="Header-nav-item">DONATE</a></div>').appendTo('.Mobile [data-nc-container="top-center"]');
 }); 
</script>
<style>
  nav.Header-nav.Header-nav--secondary a {
    white-space: nowrap;
}
  .Mobile [data-nc-container="top-center"] {
    display: flex !important;
}
  .Mobile [data-nc-container="top-center"] a {
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
    font-weight: 500 !important;
    border: 0;
    background-color: #0a579f;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: #fff;
    border-radius: 30px;
    padding: 9px 12px;
    margin: 0.618em 0.618em;
 
  }

</style>

<style>
  /* Hide join here orange button */
@media screen and (min-width:641px) {
    div#block-yui_3_17_2_1_1590057489722_4915 {
    display: none;
}
}

/* hide mobile donate button */
nav.Mobile-overlay-nav.Mobile-overlay-nav--secondary {
    display: none;
}
</style>

<script>
  $(document).ready(function(){
    setTimeout(function(){
     $('div[class*="FloatingButton__Container"]').appendTo('[data-nc-container="top-right"]');
},3000); 
});
</script>
<style>
  .eaSXfB {
    position: static !important;
    margin-left: 20px;
}
  .Header-search {
    display: none;
}
</style>

As always @tuanphan thank you for all your help. I've managed the styling with a little help from Elfsight too. 

So pleased it finally works! 

Thank you so much.