WordPressテーマTCDのカスタマイズを研究するサイト

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

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://design-plus1.com/tcd-w/2016/06/google-develop.html

(補足)
確認のために、ウィンドウ幅を縮小・拡大し、PC表示/スマホ表示をまたいだ際に、
プルダウンメニューの背景色などが適用されないことがありますが、ページの再読み込みで改善されます。

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

The following two tabs change content below.

RM

一年中麦茶を飲んでいます。

TCD LABO ご利用上の注意

TCD LABO(ティーシーディー・ラボ)に掲載しているTCDテーマのカスタマイズ情報のご利用にあたっては、必ずカスタマイズするファイルのバックアップをご用意の上、ご利用者様責任において実施していただきますようお願いいたします。

カスタマイズの実施により生じたいかなる不具合等についてもTCD LABOはその責任を負いかねます。
何卒ご理解、ご了承の上、当サイトをご活用いただけますようお願い申し上げます。

お問合せ・ご要望

TCDLaboへのお問合せやご要望は
ご連絡フォーム をご利用ください。