以前ご紹介した「賢威7に設置したMax Mega Menuをスマホの上部に固定する方法」ではjavascriptを利用したものでした。

ところが、ご紹介した内容だと、スマホでスクロールした際に一瞬グローバルメニューが消えて再び表示されるというもので、やはり一瞬消えるのを改善したいと思い調査しました。

CSS(スタイルシート)のみで固定する方法だと「一瞬消える問題」を克服できたのでご紹介します。

「.global-nav」をCSSで追記するだけ

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

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

.global-nav{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    z-index:999;
}

}

これだけで、スマホのみ、スクロール時にもグローバルメニューが画面上部に固定されます。

javascriptで設定していた場合の修正

賢威7に設置したMax Mega Menuをスマホの上部に固定する方法」のjavascripを設定していた場合は以下の2点を修正してください。

CSSの削除

以下の部分を削除してください。

.fixed {
    position: fixed;
    top: 0;
    z-index: 1;
}

javascriptの読み込みを削除

<head>タグ内の以下の記述を削除してください。

<script type="text/javascript" src="/wp-content/themes/fans-web-child/js/sticky_menu.js" charset="utf-8"></script>

「sticky_menu.js」の削除

子テーマディレクトリの「js」フォルダに設置した「sticky_menu.js」を削除してください。