スクロールして途中で出てくるヘッダーメニューが開かない…
こうした悩みを解決します。
最初に結論
Cocoon設定の「ヘッダーの固定」はチェックせず、下記のCSSを追加することで画面の上に固定表示させます。
追加するCSS
div#header-container {
position: fixed;
top: 0px;
left: 0px;
z-index: 100;
width: -webkit-fill-available;
}
問題
パソコンでホームページを見ると、ヘッダーが常に表示してほしいときがあります。
Cocoonの初期設定ではヘッダーは画面追従しないのですが、
Cocoon設定→ヘッダー
と進み、ヘッダーの固定にチェックすればページを下にスクロールしてもヘッダーが表示されます。
ただ、これ問題があってサブメニューが開かないのです…。
対処方法
この問題は最初に出てくるメニューをそのまま画面上部に表示し続けてやれば解決します。
そのためにやることが２つあります。
１．「ヘッダーの固定」設定をOFFにする
Cocoon設定→ヘッダー
と進み、「ヘッダーの固定」のチェックを外します。
２．CSSを追加する
下記CSSを追加します。
追加するCSS
div#header-container {
position: fixed;
top: 0px;
left: 0px;
z-index: 100;
width: -webkit-fill-available;
}
WordPressトップ→カスタマイズ→追加CSS
に入れるとよいでしょう。すべてのページにヘッダー固定表示が反映されます。
下記画像で、ある程度スクロールしてもサブメニューが表示できるのが分かります。
サブメニューが開かないのはCocoonの仕様
ヘッダーを固定する、にチェックして出てくるメニューで、サブメニューが開かないのはアドセンス広告違反にならないようにするための工夫です。
あえてCocoon側がこのような動作になるようにしています。
アドセンス広告を貼り付けている方は今回の対応でアドセンスポリシー違反にならないようご注意くださいませ。
私は企業ホームページ制作だったのでこの方法が最善でした！
上記対応はスマホ表示にも反映されます
ちょっと、この対応だとスマホでのメニュー表示がずれておかしいんすけど…
…分かります。この方法だと画面幅を考慮していないのでスマホ表示の際にずれが生じます。
いわゆるレスポンシブ未対応です。
色々と載せることはできるんですけど、ホームページの構成によって対応方法が異なるので、一概にこれと言えないのです、すみません…。
もし上記コードを実装して自力で直せないという方はご相談くださいませ。
確認させていただき、一緒にレスポンシブ対応できればと思います！