Move Elfsight Search Bar to Header

[tuanphan]

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.

#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>

#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;
}

#4. Result