【Swellカスタマイズ】グローバルナビを左側に固定し、2カラムで表示する

Swellでヘッダーメニューを左側に設置するカスタマイズです。

画面をスクロールしてもメニューエリアは固定されたままです。

一応サブメニューにも対応させました。

メニューをマウスオーバーした時のエフェクトは細線の方が綺麗な気がするので、その変更方法もおまけ。

カスタマイズからの設定とCSSのコピペのみで実装できます。

カスタマイズの設定

カスタマイズ > ヘッダー

■カラー設定
ヘッダー背景色：指定しない (CSSでメインカラーを指定)
ヘッダー文字色：#fff

■レイアウト・デザイン設定 > ヘッダーのレイアウト(PC)
ヘッダーナビを下に

■ヘッダー境界線
なし ※お好みで

■トップページでの特別設定 > ヘッダーの背景を透明にするかどうか
する(文字色:白)

■ヘッダーの追従設定
ヘッダーを追従させる（PC）→チェックを外す

■ヘッダーメニュー（グローバルナビ）設定 > マウスホバーエフェクト
ラインの出現(左から) ※お好みで

■ホバー時に出てくるラインの色
テキストカラー

■ヘッダーメニューの背景色
背景色は設定しない

CSSは下記をご参照ください

追加CSSに下記をコピペ