Move Elfsight Search Bar to Header

Pro Tips Other Tips
1

To move Elfsight Search Widget to Header in Squarespace, you can follow these.

#1. Add Elfsight Search embed code to Code Injection Footer. Something like this.

image
image800×248 55.3 KB

#2. Use this code under #1 code

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
  $(document).ready(function(){
    $('div[class*="elfsight-app-"]').clone().insertAfter('.header-display-desktop .header-title-nav-wrapper');
  $('body>div[class*="elfsight-app-"]').insertBefore('.header-menu-actions.social-accounts');  
});
</script>

image
image800×348 42.3 KB

#3. Use this code to Custom CSS box

/* ELFSIGHT SEARCH HEADER */
  header#header [class*="elfsight-app"] {
    position: relative;
    z-index: 999999;
    margin-left: 1.4vw;
}
div[class*="elfsight-app"] form {
    border: 1px solid #fc9901 !important;
}
div[class*="elfsight-app"] form input, div[class*="elfsight-app"] form input::placeholder {
    color: #fc9901 !important;
}
div[class*="elfsight-app"] form svg {
    fill: #fc9901 !important;
}

image
image572×1090 85.4 KB

#4. Result

image
image800×149 26.9 KB

1 Like
2

Hi Tuan, I’ve done these steps and I see the search bar in the header where I want it but it also appears on the footer… can you help me remove it? This is the site: Future Home — Tauranga Arts Festival

Here’s my code:

CSS
header#header [class*=“elfsight-app”] {
position: relative;
z-index: 999999;
margin-left: 1.4vw;
}
div[class*=“elfsight-app”] form {
background-color: white !important;
border: none !important;
padding: 0.8em 1.2em!important;
border-radius: 100px;
}
div[class*=“elfsight-app”] form input, div[class*=“elfsight-app”] form input::placeholder {
color: GRAY !important;
opacity:1;
font-family: “thermal-variable”,sans-serif;
font-size: 1em;
}
div[class*=“elfsight-app”] form svg {
display: none;
}
div[class*=“elfsight-app”] form button {
@svg: “data:image/svg+xml,%3C%3Fxml version=‘1.0’ encoding=‘UTF-8’%3F%3E%3Csvg id=‘Layer_1’ xmlns=‘SVG namespace’ version=‘1.1’ viewBox=‘0 0 36.6 34.3’%3E%3C!-- Generator: Adobe Illustrator 29.0.0, SVG Export Plug-In . SVG Version: 2.1.0 Build 186) --%3E%3Cdefs%3E%3Cstyle%3E .st0 %7B fill: %23ff0053; %7D %3C/style%3E%3C/defs%3E%3Crect class=‘st0’ y=‘16.1’ width=‘35.2’ height=‘2’/%3E%3Cpolygon class=‘st0’ points=‘18.7 34.3 17.3 32.8 33.7 17.1 17.3 1.4 18.7 0 36.6 17.1 18.7 34.3’/%3E%3C/svg%3E”;
content: ‘’;
width: 1.2em;
height: 1.2em;
display: inline-block;
vertical-align: middle;
background-color: currentColor;
background-size: cover;
-webkit-mask-image: url(@svg);
-webkit-mask-size: 1.2em;
-webkit-mask-position: center right;
-webkit-mask-repeat: no-repeat;
mask-image: url(@svg);
mask-size: 1.2em;
mask-position: center;
mask-repeat: no-repeat;
padding-left: 1.2em;
}

3

Here’s the code injection:

4

@Kim_Manunui You can use this extra code to Custom CSS (in Squarespace)

div.elfsight-app-430c350b-187c-4434-a31a-0e107da3f038 {
    display: none !important;
}
header#header div.elfsight-app-430c350b-187c-4434-a31a-0e107da3f038 {
    display: block !important;
}
1 Like
5

Thank you so much!

1 Like