Header Right > Animated Search

#1
I'm trying to create an animated search function in the header right area next to the menu. User clicks on magnifying glass and search box appears below. See images.
After adding the below code I should be at the point of just playing with padding and margins. But the magnifying glass is not appearing and the search box is not disappearing. Instead a dot is shown, which when clicked makes the search box disappear. Here is the website http://kp-khalsa.com

How can I get this to work properly?

I've added the following code to the "Custom Javascript"

JavaScript:
jQuery(function( $ ){

    $('#main-nav-search-link').click(function(){
        $('.search-div').show('slow');
    });

    $("*", document.body).click(function(event){
        // event.stopPropagation();
        var el = $(event.target);
        var gsfrm = $(el).closest('form');
        if(el.attr('id') !='main-nav-search-link' && el.attr('role') != 'search' && gsfrm.attr('role') != 'search'){
            $('.search-div').hide('slow');
        }
    });

});
Then this in the "Custom Functions"

PHP:
// Enqueue scripts and styles
add_action( 'wp_enqueue_scripts', 'custom_enqueue_scripts_styles' );
function custom_enqueue_scripts_styles() {
    wp_enqueue_script( 'global', dynamik_get_stylesheet_location( 'url' ) . 'global.js', array( 'jquery' ), CHILD_THEME_VERSION, true );
}

// Customize search form input button text
add_filter( 'genesis_search_button_text', 'sp_search_button_text' );
function sp_search_button_text( $text ) {
    return esc_attr( 'Go' );
}
This in a PHP widget in Header Right

PHP:
<?php
echo '<li class="search"><a id="main-nav-search-link"
class="icon-search"></a><div class="search-div">' .
get_search_form( false ) . '</div></li>';
?>
And this in "Custom CSS"

CSS:
/*
Animated Search Form
---------------------------------------------------------------------------------------------------- */

.menu-primary {
    overflow: visible;
}

.site-header .search {
    display: inline-block;
    position: relative;
    width: auto;
    padding: 0;
    float: right;
}

li a.icon-search:before {
    font-family: "Font Awesome 5 Free";
    font-weight: normal;
    font-style: normal;
    text-decoration: inherit;
    content: "\f002";
}

li a.icon-search {
    cursor: pointer;
}

.search-div {
    display: none;
    position: absolute;
    z-index: 10;
    right: 0;
    width: 300px;
    padding: 10px;
    -webkit-border-radius: 0 0 6px 6px;
    border-radius: 0 0 6px 6px;
    background: #f2efef;
}

.search-div .search-form {
    position: relative;
    overflow: hidden;
}

.search-div .search-form input[type="search"] {
    width: 100%;
    padding: 10px;
    font-size: 16px;
}

.search-div .search-form input[type="submit"] {
    position: absolute;
    right: -1px;
    bottom: 1px;
    padding: 10px 14px;
    -webkit-border-radius: 0;
    border-radius: 0;
}

/* Clear search field placeholder text on focus */
input:focus::-webkit-input-placeholder {
    color: transparent;
}
input:focus:-moz-placeholder {
    color: transparent;
} /* Firefox 18- */
input:focus::-moz-placeholder {
    color: transparent;
} /* Firefox 19+ */
input:focus:-ms-input-placeholder {
    color: transparent;
} /* oldIE ;) */

@media only screen and (max-width: 800px) {
    .site-header .search {
        display: block;
        text-align: left;
    }
}

@media only screen and (max-width: 480px) {
    .site-header .search {
        float: none;
        text-align: center;
    }
}
magnifying glass.PNG
search.PNG
 
Last edited: