デモページはこちら

jQueryプラグイン、drawer.jsでヘッダーを固定してグローバルナビゲーションを追従させます。

まずhtmlですが、ハンバーガーメニュー部分のコードをヘッダーのposition: fixed;の中に記述すると、ハンバーガーメニューが展開時にオーバーレイの後ろに隠れてしまいます。そこでハンバーガーメニュー部分のコードはposition: fixed;の外に出して記述します。下記のコードではクラス名header_innerにposition: fixed;を記述しています。

<header>
	<button type="button" class="drawer-toggle drawer-hamburger">
		<span class="sr-only">toggle navigation</span>
		<span class="drawer-hamburger-icon"></span>
	</button>
	<nav class="drawer-nav">
		<ul class="drawer-menu">
			<li><a href="#">メニュー01</a></li>
			<li><a href="#">メニュー02</a></li>
			<li><a href="#">メニュー03</a></li>
			<li><a href="#">メニュー04</a></li>
			<li><a href="#page01">ページ内リンク</a></li>
		</ul>
	</nav>
	<div class="header_inner">
		<nav class="hamburger_nav">
			<ul>
				<li><a href="#">メニュー01</a></li>
				<li><a href="#">メニュー02</a></li>
				<li><a href="#">メニュー03</a></li>
				<li><a href="#">メニュー04</a></li>
				<li><a href="#page01">ページ内リンク</a></li>
			</ul>
		</nav>
	</div>
</header>

クラス名header_innerのCSSです。

.header_inner {
	position: fixed;
	top: 0;
	left: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	min-height: 80px;
	background: #fff;
}