【Cocoonカスタマイズ】ヘッダーを固定とした場合でもサブメニューを表示する方法

はじめに

Cocoon設定→ヘッダー→ヘッダーの固定「ヘッダーを固定する」をオンにすると、以下の理由からページをスクロールした際にサブメニューが表示されなくなります。

そこで、ページをスクロールしてもサブメニューが表示されるように変更します。

この記事では、この方法について説明します。

本ページに完成イメージを反映させます。

以下のコードをstyle.cssに追加します。

.fixed-header {
  /* サブメニュープルダウンアイコン */
  .has-sub {
    display: flex;
  }

  /* サブメニュー */
  .navi-in > ul li:hover > ul {
    display: block;
  }
}

「ヘッダーを固定する」設定でサブメニューが表示されない問題は、CSSのカスタマイズで簡単に解決できます。
しかし、サブメニューが非表示になるのは設計上の意図があるためです。
その意図を理解した上で、本当に必要な場合のみカスタマイズを行いましょう。