Full Responsive Header. Mobile: Left-aligned nav toggle, centered logo, right-aligned search Desktop: Left-aligned logo, centered navigation list items, right-aligned search

modern-responsive-header-768up.scss

/*********************
HEADER STYLES
*********************/

.header {
	#inner-header {
		justify-content: space-between;
	}
}

#nav-toggle,
.header-search,
#search-toggle,
#mobile-menu {
	display: none;
}

.custom-logo-link {
	order: 1;
	margin-right: auto;
}

.desktop-nav {
	order: 2;
	display: inline-block;
	margin-right: auto;
	min-width: 460px;
}

.desktop-search {
	order: 3;
	display: inline-block;
	margin-left: auto;
	position: relative;
	border-left: 1px solid $light-gray;

	input#s {
		background: $white;
		color: $dark-gray;
		border: none;
		outline: none;
		padding: $half-padding $double-padding $half-padding $base-padding;
	}

	button#searchsubmit {
		border: none;
		outline: none;
		background: transparent;
		line-height: 0;
		position: absolute;
		top: 50%;
		right: 0;
		transform: translateY(-50%);
	}
}

/*********************
NAVIGATION STYLES
*********************/

.nav {
	border: 0;
	margin-left: $double-padding;

	li {
		float: left;
		position: relative;

		a {
			text-decoration: none;
			border-bottom: 0;
			padding: $base-padding $half-padding;
			color: $dark-gray;

			&:hover, &:focus {
				color: $red;
				text-decoration: underline;
			}
		}
	} /* end .menu ul li */

	/* highlight current page */
	li.current-menu-item,
	li.current_page_item,
	li.current_page_ancestor {
		a {
			color: $red;
			text-decoration: underline;
		}
	}  /* end current highlighters */

} /* end .nav */

modern-responsive-header-base.scss

/*********************
HEADER STYLES
*********************/

.header {
	position: relative;
	background-color: $white;
	height: 110px;
	z-index: 99999;

	#inner-header {
		height: 100%;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}
}

.custom-logo-link {
	display: inline-block;
	height: 70px;
	line-height: 0;
	position: relative;
	top: $small-padding;
	order: 2;

	.custom-logo {
		height: 100%;
		width: auto;
	}
}

#nav-toggle {
	display: inline-block;
	position: relative;
	width: 22px;
	height: 22px;
	text-decoration: none;
	color: $text-color;
	font-size: 1.6rem;
	overflow: hidden;
	order: 1;
	margin-right: auto;

	span,
	&:before,
	&:after {
		content: '';
		position: absolute;
		display: block;
		height: 2px;
		width: 22px;
		background: $text-color;
		right: 0;
		@include transition(all .214s ease-in-out);
	}

	span {
		opacity: 1;
		top: 50%;
		transform: translateY(-50%);
	}

	&:before { top: 0; }
	&:after { bottom: 0; }

	&.active {
		span {
			opacity: 0;
		}

		&:before {
			top: 10px;
			transform: rotate(-45deg);
		}

		&:after {
			bottom: 10px;
			transform: rotate(45deg);
		}
	}

	&:hover,
	&:focus {
		outline: none;
	}
}

#search-toggle {
	order: 3;
	margin-left: auto;
	line-height: 0;
}

.header-search {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	background: $white;
	height: 110px;
	pointer-events: none;
	transform: translateY(calc(-100% - 10px));
	@include transition(all .214s ease-in-out);

	input#s {
		font-size: $heading3;
		height: 110px;
		border: none;
		outline: none;
		background: $white;
		width: 100%;
		color: $text-color;
		padding: $base-padding $triple-padding $base-padding $base-padding;
		max-width: 780px;
	}

	#searchsubmit {
		display: none;
	}

	.close-search {
		position: absolute;
		top: 50%;
		right: $base-padding;
		transform: translateY(-50%);
		z-index: 2;
		line-height: 0;
	}

	&.active {
		transform: translateY(0);
		pointer-events: all;
	}
}

#mobile-menu {
	display: block;
	position: absolute;
	text-align: center;
	top: 110px;
	left: 0;
	width: 100%;
	background: $white;
	padding: $base-padding 0;
	z-index: 99;
	pointer-events: none;
	transform: translateY(calc(-100% - 20px));
	@include transition(transform .214s ease-in-out);

	&.active {
		pointer-events: all;
		transform: translateY(0);
	}

	.btn-black {
		display: block;
		width: 310px;
		font-size: 1.4rem;
		font-weight: 700;
		max-width: calc(100% - 40px);
		padding: 18px $base-padding;
		margin: 0 auto $base-padding;
	}
}

.desktop-nav,
.desktop-search {
	display: none;
}


/*********************
NAVIGATION STYLES
*********************/

.mobile-nav {
	margin: 0;
	text-align: center;
	padding: 0 $base-padding $double-padding;

	li {
		display: block;

		a {
			text-decoration: none;
			font-size: $heading3;
			display: block;
			color: $dark-gray;
			padding: $base-padding 0;
		}
	}
}

modern-responsive-header-functionality.js

// Navigation toggle - add class on click
	$('#nav-toggle').on('click', function(e) {
		$('#nav-toggle, #mobile-menu').toggleClass("active");
		e.preventDefault();
  });

	// Search toggle - add class on click
	$('#search-toggle').on('click', function(e) {
		$('.header-search').addClass("active");
		$('.header-search input#s').focus();
		e.preventDefault();
	});

	// Close search - remove class on click
	$('.close-search').on('click', function(e) {
		$('.header-search').removeClass("active");
		e.preventDefault();
	});

modern-responsive-header-markup.php

<header class="header" role="banner" itemscope itemtype="http://schema.org/WPHeader">

	<div id="inner-header" class="wrap cf">

		<!-- Logo -->
		<a href="<?php echo get_site_url(); ?>" class="custom-logo-link" rel="home" itemprop="url">
		  <img class="custom-logo" alt="Logo" itemprop="logo" src="<?php echo get_template_directory_uri(); ?>/library/images/logo.svg">
		</a>

		<nav class="desktop-nav" role="navigation" itemscope itemtype="http://schema.org/SiteNavigationElement">
			<?php wp_nav_menu(array(
				'container' => false,                           		// remove nav container
				'container_class' => 'menu cf',                 		// class of container (should you choose to use it)
				'menu' => __( 'The Main Menu', 'screenpartner' ),  	// nav name
				'menu_class' => 'nav top-nav cf',               		// adding custom nav class
				'theme_location' => 'main-nav',                 		// where it's located in the theme
				'before' => '',                                 		// before the menu
				'after' => '',                                  		// after the menu
				'link_before' => '',                            		// before each link
				'link_after' => '',                             		// after each link
				'depth' => 0,                                   		// limit the depth of the nav
				'fallback_cb' => ''                             		// fallback function (if there is one)
			)); ?>
		</nav>

		<a href="#" title="Toggle menu" id="nav-toggle"><span></span></a>

		<a href="#" title="Search Site" id="search-toggle"><img src="<?php echo get_template_directory_uri(); ?>/library/images/search.svg" alt="Search Icon"></a>

		<div class="desktop-search"><?php echo get_search_form(); ?></div>

	</div>

	<div class="header-search">
		<?php echo get_search_form(); ?>
		<a href="#" title="Search Site" class="close-search"><img src="<?php echo get_template_directory_uri(); ?>/library/images/close.svg" alt="Close Icon"></a>
	</div>

</header>

<nav id="mobile-menu" role="navigation" itemscope itemtype="http://schema.org/SiteNavigationElement">
	<?php wp_nav_menu(array(
		'container' => false,                           		// remove nav container
		'container_class' => 'mobile-menu cf',                 		// class of container (should you choose to use it)
		'menu' => __( 'The Main Menu', 'screenpartner' ),  	// nav name
		'menu_class' => 'mobile-nav cf',               		// adding custom nav class
		'theme_location' => 'main-nav',                 		// where it's located in the theme
		'before' => '',                                 		// before the menu
		'after' => '',                                  		// after the menu
		'link_before' => '',                            		// before each link
		'link_after' => '',                             		// after each link
		'depth' => 0,                                   		// limit the depth of the nav
		'fallback_cb' => ''                             		// fallback function (if there is one)
	)); ?>
</nav>