Cocoonでヘッダーのサブメニューが開かない問題の解決方法を紹介します

スクロールして途中で出てくるヘッダーメニューが開かない…

こうした悩みを解決します。

最初に結論

Cocoon設定の「ヘッダーの固定」はチェックせず、下記のCSSを追加することで画面の上に固定表示させます。

追加するCSS

div#header-container {
position: fixed;
top: 0px;
left: 0px;
z-index: 100;
width: -webkit-fill-available;
}

問題

パソコンでホームページを見ると、ヘッダーが常に表示してほしいときがあります。

Cocoonの初期設定ではヘッダーは画面追従しないのですが、
Cocoon設定→ヘッダー
と進み、ヘッダーの固定にチェックすればページを下にスクロールしてもヘッダーが表示されます。

ただ、これ問題があってサブメニューが開かないのです…。

対処方法

この問題は最初に出てくるメニューをそのまま画面上部に表示し続けてやれば解決します。
そのためにやることが2つあります。

1.「ヘッダーの固定」設定をOFFにする

Cocoon設定→ヘッダー
と進み、「ヘッダーの固定」のチェックを外します。

2.CSSを追加する

下記CSSを追加します。

追加するCSS

div#header-container {
position: fixed;
top: 0px;
left: 0px;
z-index: 100;
width: -webkit-fill-available;
}

WordPressトップ→カスタマイズ→追加CSS
に入れるとよいでしょう。すべてのページにヘッダー固定表示が反映されます。

下記画像で、ある程度スクロールしてもサブメニューが表示できるのが分かります。

サブメニューが開かないのはCocoonの仕様

ヘッダーを固定する、にチェックして出てくるメニューで、サブメニューが開かないのはアドセンス広告違反にならないようにするための工夫です。

あえてCocoon側がこのような動作になるようにしています。
アドセンス広告を貼り付けている方は今回の対応でアドセンスポリシー違反にならないようご注意くださいませ。

私は企業ホームページ制作だったのでこの方法が最善でした!

上記対応はスマホ表示にも反映されます

ちょっと、この対応だとスマホでのメニュー表示がずれておかしいんすけど…

…分かります。この方法だと画面幅を考慮していないのでスマホ表示の際にずれが生じます。
いわゆるレスポンシブ未対応です。
色々と載せることはできるんですけど、ホームページの構成によって対応方法が異なるので、一概にこれと言えないのです、すみません…。

もし上記コードを実装して自力で直せないという方はご相談くださいませ。
確認させていただき、一緒にレスポンシブ対応できればと思います!

▼不明点や作成依頼などあればこちらからどうぞ
立プロに問合せる

▼インスタやってます

 

立プロ

組込エンジニア⇒個人事業主
ITと連携したビジネス発展をサポートしています。
C,C#,JavaScript, Vue, PHP, VBA, GAS, Kotlinなど、扱う言語が増えゆく日々。

立プロをフォローする
wp
立科プログラミング
タイトルとURLをコピーしました