search.js

// Search expose JS
var formHeaderSearch = $('form.header-search');
var mobileBreakpoint = 1024;

formHeaderSearch.find('button').click(function (event) {
    var windowWidth = $(window).width();
    if ((!formHeaderSearch.hasClass('search-exposed')) && (windowWidth > mobileBreakpoint)) {
        event.preventDefault();
        console.log('expose the search');
        formHeaderSearch.addClass('search-exposed');
        formHeaderSearch.find('#siteSearch').focus();
    }
});

// Make the search input fire the form on enter
$("#siteSearch").keyup(function(event) {
  if (event.keyCode === 13) {
    $('form.header-search button').click();
  }
});

search.scss

form.header-search{
	display: inline-block;
	vertical-align: middle;
	float: right;
	margin: 0;

	.searchContainer{
		display: block;
		float: none;
		margin: 0;
	}

	#siteSearch{
		width: 0px;
		padding: 0px;
		border: none;
		margin: 0;
		height: 50px;
		position: absolute;
		top: 50px;
		right: $site-container-padding;
		box-shadow: 0 3px 10px rgba(0,0,0,0.2);
		transition: all $transition-duration $transition-curve;
		&:focus {
 			outline: 0;
 		}
	}

	button{
		width: 40px;
		height: 40px;
		overflow: hidden;
		padding: 0;
		background-color: transparent;
		border-radius: 0px;
		margin: 0;

		&:before{
			margin: 0;
			font-weight: normal;
			width: 40px;
			height: 40px;
			line-height: 40px;
			display: block;
			color: $main-font-colour;
			font-size: 20px;

			font-family: $icon-font-family;

			@if $icon-font-family == 'Genericons' {
				content: '\f400';
			}

			@if $icon-font-family == 'FontAwesome' {
				content: '\f002';
			}
		}

		&:hover:before {
			color: $primary-colour;
		}
	}

	&.search-exposed #siteSearch {
		width: 400px;
		padding: 15px;
		border: 1px solid $border-color;
	}
}