Search icon driven search form in navbar

/*

 * Switch default core markup for search form, comment form, and comments

 * to output valid HTML5.

 */

add_theme_support( ‘html5’, array(

	‘search-form’,

	‘comment-form’,

	‘comment-list’,

	‘gallery’,

	‘caption’,

) );

IN FUNCTIONS FILE

‘primary’, ‘menu_id’ => ‘primary-menu’ ) ); ?>
”> 
 

IN HEADER FILE

/*— related to the dropping search entry field —*/

.top-nav-bar, .top-search-section{display:inline-block; float:left;}

.site-header .search-form {position: relative; background-image: url(“./images/mglass.png”); background-repeat: no-repeat; top:.25em; padding-bottom:.5em;}

.site-header .search-field {background-color: transparent;background-size: 24px 33px;border: none; cursor: pointer;height: 37px;margin: 3px 0;padding: 0 0 0 34px;
position: relative;-webkit-transition: width 400ms ease, background 400ms ease; transition:width 400ms ease, background 400ms ease;width: 0;}

.site-header .search-field:focus {background-color: #fff;border: 2px solid $baseBlackLess90Color;cursor: text;outline: 0;width: 230px;margin-top:50px;margin-left: -230px;}

.search-form .search-submit {display:none;}

RELATED CSS

ABOUT
WORDPRESS
KNOWLEDGE BASE