2017-10-20

ハンバーガーメニューを固定しました。

hamburger2
ワードプレスの記事が続いていますが、たぶん今回で一休みになります。

スポンサーリンク


スマホ表示でのハンバーガーメニューを固定して追従型にしました。

スマホ表示で右上に黒い三本線が並んでいます。
見た目がハンバーガーみたいだと言うことで命名されたようです。
このマークに触れるとメニューが開きます。
自分がログインしているとハンバーガーが見えないし
『追従してきたほうが便利かなぁ』ということでカスタマイズしました。
忘れちゃうとダメなので記録しておきます。

ハンバーガーメニューを固定して追従型にする方法

/* トップナビゲーション
---------------------------------------------------- */
.menu-toggle {
width: 40px;
height: 40px;
}
.hamburger { display: none; }

以下を追加
position: fixed !important;
position: absolute;
.menu-toggle {
width: 40px;
height: 40px;
position: fixed !important;
position: absolute;

}
.hamburger { display: none; } 

と追加します。

/* Mobile (Portrait) 画面の横幅が300px~767pxまで(基本)
---------------------------------------------------- */
#nav { display: none; position: fixed; top: 0; float: none; text-align:center; width: 100%; background: #fefefe; margin: 0 auto 40px auto; padding: 0; }

と
.toggle { display: block; float: right; position: fixed; top: 10px; right: 10px; z-index: 10000; }

二か所にabsoluteからfixedに変更します。

私の健忘録なので自己責任でお願いします。
※私がカスタマイズしているテーマはFolclore です。

  • follow us in feedly
スポンサーリンク


こちらの記事も読まれています。