Q.スクロールした時にメニューヘッダーを固定したいのですが、どうすればよいですか?
A.下記にてご対応ください。
外観>テーマオプション>基本設定のカスタムCSSに下記を入力ください。
#header-wrapper { position: fixed; top: 0; left: 0; z-index: 3; width: 100%; } @media screen and (min-width:1109px) { body { margin-top: 170px; } #header-wrapper { background-image: url(★ここにテーマ同梱のヘッダー背景画像URLを入力する必要があります。★); background-repeat: repeat-x; background-position: left bottom; } } @media screen and (max-width:1110px) { body { margin-top: 60px; } }
★部分、背景画像のURLについて、多くの場合は下記のようなURLになります。
http://(サイトURL)/wp-content/themes/nextage_tcd021/images/head_bg_light.jpg
適宜ご変更頂くか、うまく表示されない場合はデベロッパーツールなどで背景画像URLを確認してください。
■超初心者向け!クロームのデベロッパーツールの基本操作
https://tcd-theme.com/2016/06/google-develop.html
(補足)
確認のために、ウィンドウ幅を縮小・拡大し、PC表示/スマホ表示をまたいだ際に、
プルダウンメニューの背景色などが適用されないことがありますが、ページの再読み込みで改善されます。
また、新しいテーマではテーマオプションのヘッダーから固定表示を選択できることがあります。
この記事は役に立ちましたか?
もし参考になりましたら、下のボタンで教えてください。
今後の記事作成の参考とさせて頂きます!