Cookie Privacy Preferences

We utilize essential cookies to ensure our website operates effectively and remains secure. Additionally, we'd like to request your permission to use optional cookies. These are intended to enhance your browsing experience by offering personalized content, displaying advertisements that are relevant to you, and helping us to further refine our website.

Choose "Accept all cookies" to agree to the use of both essential and optional cookies. Alternatively, select "Let me see" to customize your preferences.

 
Building Blocks
 
 
sparkles2.png

Search - Hidden Until Icon Clicked

 

This code will make the search bar in the header completely hidden until the magnifying glass icon is clicked.

 

How to use the Effect

Firstly, create a 'Menu' which has the magnifying glass icon in it. Add this into your header.
Secondly, simply copy the below code and paste it into your 'Footer Code' of the 'Tracking' area of Blocklab, hit save and publish.

 

JS

<script>
$("#blocklab-header .fa.fa-search").on("click", function(e) {
    e.preventDefault();
    $(this).hide().closest('ul').prepend('<li><form class=form-inline action=/search method=get style=" position: relative; top: 7px; "><div class=input-group><input type=text name=q class=form-control placeholder=Search><span class=input-group-btn> <button class="btn btn-default" type=submit><i class="fa fa-search"></i></button></span></div></form></li>');
});
</script>

(Find out how to/where to add JS code in this tutorial) HOW TO ADD JS CODE