無料のElementorだけで作ったヨガのコミュニティのLPのテンプレート

Elementorの新しい
無料テンプレートサイトが追加されました!

Diviのヘッダーアニメーションを消す方法

Diviのヘッダーのアニメーションを消す方法【コード要らず】

こんにちはナオミです。

Diviはデフォルトでスクロール時に、ヘッダーのサイズが変わるアニメーションが付いてきます。

Diviのヘッダーアニメーション

カッコいいですが、ちょっとウザいと思う時もあるのではないでしょうか?
しかもアニメーションを消すオプションがないんです。
じゃあJSかCSSを使ってアニメーションを消すしかないのか?

実はその必要はないんです。
カスタマイザーのオプションの設定の仕方で、このアニメーションは消すことができるんです。

とっても簡単です。

ではそのやり方を紹介しますね。

アニメーションを消す

まずはテーマカスタマイザーにいき、『ヘッダーとナビ』→『第一メニューバー』の設定に行きます。

Diviで第一メニューバーの設定

ここで注目するのは『メニューの高さ』です。
今これ68になってますよね。
自分のDiviのインストールでもこの値をしっかり覚えてください。

固定ナビ設定

次にカスタマイザーのナビゲーションを一つ戻り、『固定ナビ設定』に行きます。

Diviの固定ナビ設定

『固定メニューの高さ』を『メニューの高さ』と同じにする

『固定メニューの高さ』とありますね。
これを先ほどの『メニューの高さ』と同じにします。
68だったので、こちらも68にします。

これだけです。

これでもうアニメーションは起こりません。
超簡単だったのではないでしょうか?
是非試してみてください!

Diviのことをもっと深く知りたい方は、Diviの使い方完全ガイドをご覧ください。

Diviの最新情報を知りたいなら、ノーコードでWEBサイト制作を支援するサロン『TOFUラボ』に参加しませんか?
私が運営してるノーコードでWEBサイト制作を支援するのコミュニティです。

最新情報だけではなく技術的な質問も飛び交っています。

また、デザインやSEOなどWEBサイト制作に関する様々な勉強会も開催されています。

『TOFUラボ』の紹介はこちらです

https://tofulab.app/join/

興味があれば、是非参加してくださいね。
入会してから7日間は無料で合わないなと思えばいつでもキャンセル可能です。

それではまた!

Naomi Suzuki

このサイトを運営してるナオミです。エンジニア歴13年、海外在住歴20年。
WordPressの情報やハッキングを防ぐ脆弱性の情報と自分の海外での生活の一部を無料のメルマガで配信しています。

目次

コメントする

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

WordPressの最新情報が
毎週届く無料メールマガジン

DiviやElementorの情報だけでなく、脆弱性が見つかったプラグインやテーマのリストも毎週届きます。セキュリティの強化につながります。 

管理人のナオミが書くメルマガ
海外でエンジニア歴10年以上
DiviとElementorに精通