Simple Search

Documentation:

HTML:

<div class="search-header-container"> <div class="search-header-container-inner"> <div class="container"> <div class="row"> <div class="col-md-12"> <div class="search-main"> <form role="search" method="get" id="searchform" class="searchform" action="/"> <input name="s" type="text" placeholder="Search"> <button role="submit" type="submit"><i class="fa fa-search"></i></button> </form> </div> </div> </div> </div> </div> </div>

CSS:

/* Simple Search */ li.search-nav-control a { font-size: 18px; } .search-header-container { background-color: $primary-color; height: 0; overflow: hidden; -webkit-transition: 0.6s; -o-transition: 0.6s; transition: 0.6s; .search-main { width: 100%; position: relative; padding: 20px 0; } form { text-align: center; } input[type=text] { width: 100%; background-color: #fff; border: none; padding: 5px 10px; } button { padding: 5px 10px; border: none; color: $primary-color; background-color: transparent; font-size: 20px; position: absolute; top: 17px; right: 0; } }

JS:

jQuery('.search-nav-control').click(function(){ console.log('x'); var target = jQuery('.search-header-container'); var h = target.outerHeight(); var expanded_h = target.data('expanded-height'); if (h > 0) { target.css('height', '0px'); } else { target.css('height', expanded_h + 'px'); } }); function search_bar_init() { var h = jQuery('.search-header-container-inner').outerHeight(); jQuery('.search-header-container-inner').parents('.search-header-container').attr('data-expanded-height', h); } search_bar_init();

PHP:

// Simple Search: Control function add_search_to_nav($items) { return $items .= '<li class="search-nav-control"><a role="button"><i class="fa fa-search"></i></a></li>'; } add_filter('wp_nav_menu_items','add_search_to_nav');