Add animation effect to search in header

[flammagreg]

Hi guys,

Website: seraneeva.com

How can I add the same animation when a user clicks in the newsletter in the footer to the search in the header? I'd like everything to be the same, but just as "Email" turns white to match the underline in the newsletter, I'd like "Search" to turn black to match the underline in the Search tab.

[BSSCommerce-HDL · Accepted solution]

Hi @flammagreg, 
Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code
Step 2: Search file footer-main.liquid
Step 3: Find "right-drawer.liquid" file and inside "search-input-group" replace to this code: 

 <label for="Search"  class="hidden-label">Search</label>
                <input
                  type="search" name="q" id="search-input" placeholder="{{ 'general.search.placeholder' | t }}"
                  class="input-group-field" aria-label="{{ 'general.search.placeholder' | t }}" autocomplete="off" autocorrect="off" spellcheck="false" ref="searchText"
                  v-model="searchQuery" @keydown.enter="onSearchSubmit"
                />
                <button type="button" aria-label="{{ 'general.search.clear' | t }}" class="search-drawer--clear icon-fallback-text standalone-icon--wrapper" v-if="searchQuery.length > 0" v-on:click="clearSearchInput">
                  <span class="fallback-text">{{ 'general.search.clear' | t }}</span>
                  {% render 'theme-icon' with icon: 'close', iconSize: 20 %}
                </button>
              </div>

Step 4: Pls insert this code to your file css: 

.search-input-group {
    position: relative;
  }
  
  .hidden-label {
    overflow: initial !important;
    clip: unset !important;
  }
  
  .search-input-group:has(input:placeholder-shown) > label
  {
    top: 0;
    left: 0;
    transform: translate(30px, 10px);
    margin-bottom: 0;
    transition: all 1s cubic-bezier(.5,0,0,1);
    color: gray !important;
  }
  
 .search-input-group input::placeholder {
   color: transparent !important; 
 }
  
 .search-input-group:has(input[type="search"]:focus) > label,
 .search-input-group:has(input[type="search"]:not(:placeholder-shown)) > label
 {
   transform: translate(0, -5px) scale(.6428571429);
   color: black !important;
 }

Here is result: 

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍