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

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

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

立プロ

姫野秀徳（ひめのひでのり）
組み込みエンジニア。
第二種電工事士、基本情報技術者、Code.org認定教師。
microbitを用いた電子工作＆プログラミング教室を開校。
組み込み開発の実際を発信するyoutuber。

最初に結論

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

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

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

Cocoonの初期設定ではヘッダーは画面追従しないのですが、

Cocoon設定→ヘッダーと進み、ヘッダーの固定にチェックすればページを下にスクロールしてもヘッダーが表示されます。

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

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

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

下記CSSを追加します。

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

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

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

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

あえてCocoon側がこのような動作になるようにしています。

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

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

…分かります。この方法だと画面幅を考慮していないのでスマホ表示の際にずれが生じます。

いわゆるレスポンシブ未対応です。

時間があったら修正版にして更新します。