コピペでできる！スティンガーのスマホメニューを上部に固定する方法

最近はスマートフォン向けに縦長のサイトが増えています。特にブログなんかだとサイドバーはメインカラムの下に付いてくるのでより長くなる。

そんなときにスマートフォンのメニューが固定されていれば便利ですよね？

ということで今回はスマートフォンのメニューを上部に固定する方法をご紹介します。スティンガーの方はコピペで出来るはずなので、ぜひ参考にしてください。

スティンガーでスマートフォンのメニューを上部に固定する方法。

CSSだけで出来ます。

まずはヘッダーを探しましょう。

Google Chromeの「要素の検証」で見てみると一発でわかります。僕のサイトはid=”smaNavi”となっているようですね。スティンガー6ではid=”s-navi”となっています。

これを上部に固定します。まずはCSSコードをお見せします。

@media only screen and (max-width: 780px){
nav#s-navi {
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background: #fff;
    z-index: 100;
    height: 50px;  
    box-shadow: 0px 1px 2px #ccc;
}
#s-navi dd.acordion_tree {
    background: #fff;
}
dt.trigger {
    padding: 5px 0px;
}
#wrapper {
    padding-top: 50px;
}
}