【賢威8】グローバルメニューの位置をカスタマイズ

PCとモバイルそれぞれのグローバルメニューをカスタマイズする方法を紹介いたします。

グローバルメニューの位置を変更する

中央寄せ

グローバルメニューの位置を中央にする以下のコードをCSSに追加します。

CSSに追加するコード

/*グローバルメニューの位置を中央*/
.keni-gnav_inner ul{
	margin-left: auto;
	margin-right: auto;
}

尚、グローバルメニューの位置を中央にする場合は、ヘッダーのロゴも中央に寄せるとデザインがまとまります。

完成イメージ

ヘッダーのロゴを中央寄せにする

右寄せ

以下のコードをCSSに追加します。

CSSに追加するコード

/*グローバルメニューの位置を右寄せ*/
.keni-gnav_inner ul{
	margin-left: auto;
	margin-right: 0;/*この数値を変えれば右端に余白ができる*/
}

完成イメージ

グローバルメニューの位置を右寄せにする

ヘッダー・グローバルメニューの位置を固定する

最上部に固定

グローバルメニューの位置を固定するこちらの方法を行うには、ヘッダーとグローバルメニュー両方を最上部に固定させる必要があります。
また、横長なロゴ画像と数の多い（or文字数が多い）グローバルメニューを組み合わせてしまうと、タブレット等の幅が狭い画面（スマホは除く）で見た際に重なって途切れてしまうことがある為、それらを考慮して配置を行う必要がございます。
タブレット等の幅が狭い画面で見た際に重なって途切れてしまう中央寄せ等よりも高度なカスタマイズとなる為、こちらは編集サポートor代行サポートでのご案内とさせていただきます。
ご希望の方は以下ページをご確認ください。

この記事を書いた人

まえさん

賢威カスタマイズを運営する会社の代表です。なるべく「わかりやすく、シンプルに」を心がけた初心者の方向けのコンテンツ作りを目指しております。上級者の方には「物足りない」「ここはこの方が」なんてこともあるかと思いますが、どうかあたたかい目で見守っていただけると幸いです。

記事一覧へ