Origin II でヘッダーのロゴとメニューを上下に配置し中央揃えにする方法

この記事では、Lightning / Lightning Pro のスキンの一つである Origin II のヘッダーにおいて、ロゴの下にメニューを配置し双方を中央揃えにする方法について解説します。

この記事のカスタマイズを施すとヘッダー部分のレイアウトが下記画像のようになります。

Origin II のヘッダーのロゴとメニューを上下に配置し中央揃えにする方法

Origin II のヘッダーのロゴとメニューを上下に配置し中央揃えにするには下記コードを 子テーマの style.css に追記します。

/* Origin II でロゴの下にメニューを配置&双方中央揃えに */
@media (min-width: 992px) {

	.container.siteHeadContainer {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
	}

	.navbar-header {
		width: 100%;
		order: 0;
		float: none;
	}

	.siteHeader_logo {
		float: none;
		width: 100%;

	}

	.siteHeader_logo img {
		margin: 0 auto;
	}

	.gMenu_outer {
		width: 100%;
		order: 1;
		float: none;
	}

	ul.gMenu {
		float: none;
		display: flex;
		justify-content: center;
	}
}

備考

今回のコードの仕様には下記が含まれています。

  • 上記コードは現在非推奨とされている Origin でも効くようにしています。
  • .navbar-headerorder2 にすると、下記画像のようにメニューとロゴの位置が入れ替わります。

まとめ

この記事では、Lightning / Lightning Pro のスキンの一つである Origin II のヘッダーにおいて、ロゴの下にメニューを配置し双方を中央揃えにする方法について解説しました。

このカスタマイズは子テーマの style.css に記述することで行うことができ、一部の値を変更することで位置替えが可能でした。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

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

CAPTCHA