とっちゃん@nyanco! です。
Pinterest（ピンタレスト）みたいなオシャレな無料のWordPressテーマ「Fukasawa」のカスタマイズシリーズですにゃ～！
コピーペーストで簡単に実装できますにゃ～♪
今回はモバイルヘッダーメニューを上部に固定させるカスタマイズです。
▼モバイルヘッダーメニューとは下図の赤枠部分のこと。
スマートフォンなどディスプレイ幅が狭いデバイスで閲覧した時に表示されるようになってますが、デフォルトだと下にスクロールするとすぐに見えなくなってしまうので、これを常時、画面上に固定表示させるようにカスタマイズします。
モバイルヘッダーメニューを常時上部固定させるカスタマイズ
【前準備】「子テーマ」を作成
テーマをカスタムする時は必ず「子テーマ」を作成してそれをカスタマイズしていきましょう。
▼「子テーマ」の作成については下記記事をご覧ください。
「style.css」に追記するコード
基本、CSS（style.css）に追記（コピペ）するだけで実装できます。
早速ですが、コピペするコードはこちら。
@media (max-width: 1000px) {
/**** mobile-header ****/
.sidebar {
/* 固定させる */
position: fixed;
/* 重なり順を上に */
z-index: 9999;
/* ヘッダー内の余白（任意） */
padding: 5px 5%;
/* 【ポイント】ヘッダーの高さ（任意） */
height: 60px;
/* ヘッダーを少し透明に（任意） */
opacity: 0.8;
}
/**** mobile-header-menu ****/
.mobile-navigation {
/* 固定させる */
position: fixed;
/* 重なり順を上に */
z-index: 9999;
/* 【ポイント】メニューの表示位置（.sidebar の height に合わせる） */
top: 60px;
/* メニューを横幅目一杯に拡げる */
width: 100%;
/* メニューを少し透明に（任意） */
opacity: 0.9;
}
/* デフォルトの余白がやや広いので狭く（任意） */
.mobile-navigation ul.mobile-menu {
padding:5% 8%;
}
/* タップできる領域を横幅一杯に拡げる */
.mobile-navigation ul.mobile-menu li a {
display: block;
}
/* なんとなくホバー設定（任意） */
.mobile-navigation ul.mobile-menu li a:hover {
opacity: 0.8;
}
/* メインコンテンツがヘッダーにかぶるのでずらす */
main#site-content {
position: relative;
/* 【ポイント】コンテンツの表示位置（.sidebar の height に合わせる） */
top: 60px;
}
}簡単にコードの解説をします。
まずデフォルトのレスポンシブ設定が、デバイス幅1,000pxが分岐点（ブレイクポイント）となっているので合わせています。
ポイントは、「.sidebar」で設定した【height: 】と同じ数値を「.mobile-navigation」と「main#site-content」の【top: 】に設定すること。
「.sidebar」を「position: fixed;」で固定すると浮いちゃって次の要素とかぶってしまうので、「.sidebar」の高さ分をずらして表示させているわけですにゃ～
他は特に難しいことはないかと！
ちなみにコメントアウトの末尾に（任意）とあるプロパティは筆者の好みに合わせた微調整なのでなくてもOKです。
おわりに
他にも「Fukasawa」テーマカスタマイズ記事をアップしておりますので、良ければチェックしてみてください。
本記事がどなたかの参考になれば幸いです。
今回は以上となります。
最後まで読んでいただきましてありがとうございました！
それではまた〜✧٩(ˊωˋ*)و✧
コメント