Diviのメニューをセクションの背景の上に表示させる方法

こんにちは、ナオミです!

diviでこんな感じのナビを作る

今日はこんな感じのメニューが背景画像の上にくるデザインをDiviで作って見たいと思います。

早速始めます。

Diviの固定ナビゲーションバーを無効にする

Diviの使い方、diviの固定ナビゲーションバーを無効にする

まずはDiviのオプションに行きまして、固定ナビゲーションバーを無効にします。

こうすることによって、メニューがスクロールと共についてくるのを防げます。

Diviのテーマカスタマイザー

次にメニューのカスタマイズです。

Diviのテーマカスタマイザーを開きます。

そして、『ヘッダーとナビ』→『第一メニューバー』に行きます。

Diviの使い方、ヘッダーナビのカスタマイズ

メニューの背景色を透明にする

Diviの使い方、ナビゲーションメニューの背景色を透明にする

セクションに背景画像をセットする

Diviのナビゲーションに背景画像を入れる

ここまでのステップがちゃんと出来ていれば、このように表示されます。

好きな背景画像をセットします。

フォントの色を変えたり大きくして見やすくしましょう。

Diviメニューに背景をセットする方法

これで完成です。

コメントする

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