TO CREATE A SEARCHBAR IN THE HEADER:

1. Place the following html code where you'd like the search bar to appear and adjust the form action URL to reflect the current site:   

  <div id="search-bar" class="fixedWidth">
      <form method="get" class="search-form displayFlex justifyContentFlexEnd" action="http://yoursite.mebyfusion.com/nakatsui/">
            <label class="flexItem">
                <input type="search" class="search-field" placeholder="Search" value="" name="s">
            </label>
            <input type="submit" class="search-submit flexItem" value="">
      </form>
</div>
            

2. upload the searchIcon to the img folder.

3. Put these styles in the stylesheet.  Adjust the background ".search-form input[type="submit]" URL to the current site (dont forget to adjsut search.php as needed).  An icon example is incuded in the folder container "searchBarInHeader.html":

/*SEARCH BAR STYLES BEGIN*/
    
<style>

#search-bar {
	margin-top: 30px;
	position: relative;
    z-index: 99999;
	cursor: pointer;
}

.search-form input[type="submit"]{
	background: url(http://yoursite.me/wordpressKevin/wp-content/themes/html5blank-stable/img/searchIcon.jpg);
	background-repeat: no-repeat;
	border: none;
	width: 32px;
	height: 28px;
	display: block;
	margin-left: -29px;
	position: relative;
	z-index: 999;
}
.search-form input[type="search"]{
	font-style: italic;
    color: #00133f;
    font-family: Arial, sans-serif;
    background: #f6f3f1;
	height: 28px;
	font-size: 13px;
    line-height: 1.5;
	box-sizing: border-box;
	padding: 0 10px;
	border: solid 1px rgb(219, 209, 202);
	width:80%;
}
.search-form input[type="search"]:focus{
	border: 1px lightblue solid;
}

@media screen and (max-width: 475px){
	body.home #search-bar{
		margin-top: 14px;
		margin-bottom: 71px;
	}
	#search-bar label {
		width: 95%;
	}
	.search-form input[type="search"]{
		width: 100%;
	}
}
</style>