Twenty Seventeen メニューをページトップに固定

WordPress のフォーラムに、「Twenty Seventeen テーマのメニュー (ナビゲーション) をページトップに固定するには?」というような内容のトピックが上がっていたので、その方法を紹介したいと思います。

方法は、簡単でスタイルを追加するだけです。

スタイルシート

スタイルシート (style.css) に以下のスタイル (CSS) を追加します。

@media screen and (min-width: 768px) {
	.navigation-top {
		top: 0;
		bottom: auto;
		position: fixed;
	}
	.site-branding {
		margin-bottom: 0 !important;
	}
	.twentyseventeen-front-page.has-header-image .custom-header,
	.twentyseventeen-front-page.has-header-video .custom-header,
	.home.blog.has-header-image .custom-header,
	.home.blog.has-header-video .custom-header {
		height: 100vh !important;
	}
	.custom-header {
		margin-bottom: 0 !important;
		padding-top: 77px;
	}
	.admin-bar .navigation-top {
		top: 32px;
	}
	.admin-bar.twentyseventeen-front-page.has-header-image .custom-header,
	.admin-bar.twentyseventeen-front-page.has-header-video .custom-header,
	.admin-bar.home.blog.has-header-image .custom-header,
	.admin-bar.home.blog.has-header-video .custom-header {
		margin-top: -32px;
	}
}

あとがき

実際に、ナビゲーションをページトップに固定すると案外良かったです。ぜひ、お試しください。

コメントを残す

メールアドレスが公開されることはありません。

日本語でコメントを入力してください。(スパム対策)