当サイトではWordPressのテンプレート『賢威7』を利用していますが、グローバルメニューを「Max Mega Menu」プラグインで生成し、スマホの画面上部で固定するようにしています。

すると、上記の画像のように、グローバルメニューと一部の要素の階層がおかしく、グローバルメニューが隠れる場合がありましたので、この解決方法をご紹介します。

要素が重なるケース

  • メニューが閉じている状態で、冒頭の画像のように「Crayon Syntax Highlighter」プラグインのソース表示の一部と重なる
  • メニューを展開した状態で、前述の「Crayon」とパンくずリストがサブメニューよりも上に表示される

解決する方法

当サイトは賢威の子テーマで運用していますので、子テーマディレクトリの「rwd.css」に以下を追記しています。

/*--------------------------------------------------------
解像度1200px以下
--------------------------------------------------------*/
@media
only screen and (max-width : 1200px){

#mega-menu-wrap-top_menu{
    z-index: 1;
}

.crayon-syntax{
    z-index: 0;
}

}

#mega-menu-wrap-top_menu」の部分で、パンくずリストとの重なりを解決し、「.crayon-syntax」の部分で「Crayon Syntax Highlighter」のソース表記との重なりを解決しています。

なお、「z-index: 0;」は重なりの基準値となり、数が大きければ大きいほど上に重なって表示されます。