Cacher is the code snippet organizer for pro developers

#search-toggle { position: absolute; width: 40px; height: 100%; top: 0; right: 65px; cursor: pointer;
    .search-icon { position: absolute; top: 50%; left: 50%; @include transform(translate(-50%,-50%)); }
    svg { width: 15px; height: 15px; fill: $color_green; }
}
.search-form { position: absolute; top: 100%; width: 100%; height: 0; z-index: 10; background-color: $color_green_dark; overflow: hidden; transition: 0.3s;
    .search-box {
        input { 
            &[type=text], &[type=password], &[type=url], &[type=email] { border-radius: 0; width: 100%; height: 60px; line-height: 60px; padding-right: 35px; font-size: 14px; color: #fff; }
        }
    }
    input {
        &[type=submit] { background-color: transparent; border: 0; }
    }
    .close { position: absolute; top: 50%; right: 30px; margin-top: -10px; @include transform(rotate(45deg)); cursor: pointer;
        &::before { position: absolute; width: 8px;; height: 8px; top: 6px;  border-top: solid 2px $color_green; border-right: solid 2px $color_green; content: ''; }
        &::after { position: absolute; width: 8px; height: 8px; left: 6px; border-left: solid 2px $color_green; border-bottom: solid 2px $color_green; content: ''; }
        &:hover {
            &::before, &::after { border-color: #fff; }
        }
    }
}
.search-form.active { height: 60px; }

jQuery(function($){
    bannerSlider(); // Call Main Banner Slider
});

function navigation() {
    $mobile_search = $("#header-search");
    $("#main-nav > li").hover(function() {
        $(this).find("ul").stop().slideToggle(200);
    });
    $("#search-toggle").on('click', function() {
        $mobile_search.toggleClass('active');
    });
    $mobile_search.find(".close").on('click', function() {
        $mobile_search.removeClass("active");
    });
    $(document).on('click', function() {
        if( !$(event.target).closest("#header-search").length && !$(event.target).closest("#search-toggle").length ) {
            $mobile_search.removeClass("active");
        }
    });
    $("#menu-toggle").on('click', function(){
        $(".mobile-menu-container").slideToggle(300);
    });
//    $("#menu-toggle").click(function() {
//        $(this).toggleClass("active");
//        $("#header").toggleClass("active");
//        $("#mobile-menu").toggleClass("active");
//    });
//    $("#mobile-menu .menu-item-has-children span").click(function() {
//        $(this).toggleClass("active");
//        $(this).parent().find("ul").slideToggle(300);
//    });
}

<div class="mobile">
    <div class="wrap">
        <a href="#" class="logo"><img src="../ui/images/Logo.png"></a>
        <div id="menu-toggle">
            <span></span>
        </div>
        <div id="search-toggle">
            <button class="search-icon"><svg class="search"><use xlink:href="../ui/svg/lab/icon-sprites.svg#icon_search"></use></svg></button>
        </div>
    </div>
    <div class="mobile-menu-container">
        <ul class="mobile-menu">
            <li>
                <a href="#">Diagnostic Resources</a>
                <ul>
                    <li><a href="#">Histopathology</a></li>
                    <li><a href="#">Laboratory Animals</a></li>
                    <li><a href="#">PCR</a></li>
                    <li><a href="#">Microbiology</a></li>
                    <li><a href="#">Value Add</a></li>
                </ul>
            </li>
            <li><a href="#">Services</a></li>
            <li><a href="#">Test Directory</a></li>
            <li><a href="#">About Us</a></li>
            <li><a href="#">News & Events</a></li>
            <li><a href="#">Become a Client</a></li>
        </ul>
        <div class="utility-nav">
            <nav>
                <a href="#">Contact Us</a>
                <a href="#">Schedule a Pickup</a>
                <a href="">Client Login</a>
            </nav>
            <div class="nav-bottom">
                <h5>858-875-7550</h5>
                <ul class="social-nav">
                    <li><a href="#" target="_blank"><svg class="instagram"><use xlink:href="../ui/svg/social-sprites.svg#social_instagram"></use></svg></a></li>
                    <li><a href="#" target="_blank"><svg class="twitter"><use xlink:href="../ui/svg/social-sprites.svg#social_twitter"></use></svg></a></li>
                    <li><a href="#" target="_blank"><svg class="facebook"><use xlink:href="../ui/svg/social-sprites.svg#social_facebook"></use></svg></a></li>
                </ul>
            </div>
        </div>
    </div>
    <form class="search-form" id="header-search">
        <div class="search-box">
            <input type='text' name="search" value="">
        </div>
        <input type="submit">
        <span class="close"></span>
    </form>
</div>