ホテル・結婚式場などのホームページがつくれるエレガントなデザインのテンプレート「CANON」

ワードプレステーマ別

TCDテーマNEXTAGE:ヘッダーバーを上部に固定する方法

WordPressテーマ「NULL」

TCD LABOはWordPressテーマ「NULL」を使用して作られています。

ダウンロード

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表示/スマホ表示をまたいだ際に、
プルダウンメニューの背景色などが適用されないことがありますが、ページの再読み込みで改善されます。

また、新しいテーマではテーマオプションのヘッダーから固定表示を選択できることがあります。

この記事は役に立ちましたか?

もし参考になりましたら、下のボタンで教えてください。
今後の記事作成の参考とさせて頂きます!

同じテーマのカスタマイズ記事