[永田朗]

【お使いの Snow Monkey のバージョン】12.1.3
【お使いの Snow Monkey Blocks のバージョン】10.0.1
【お使いの Snow Monkey Editor のバージョン】 4.0.0
【お使いのブラウザ】Chrome
【当該サイトのURL】

探偵を仙台でお探しの方は「ガルエージェンシー仙台第一」へどうぞ。

仙台で探偵に相談するなら【ガルエージェンシー仙台第一】総合探偵社として24年、4000件以上のご相談実績、経験豊富な解決ノウハウをもった弊社にご相談下さい。素行調査…

tantei-sendai.com

### 実現したいこと

ショーケースに記載されているこちらのサイトのように、

下に移動した際に表示されるヘッダーに、会社ロゴ、電話番号、メールアドレスボタンを追加したい。

### 発生している問題

 

### 試したこと

会社のロゴはサイト基本情報から追加ができました。

電話番号、メールアドレスボタンは、デザイン>ヘッダー>ヘッダーコンテンツ　で、ヘッダーに追加することが出来ました。

しかし、下に移動した際に表示されるヘッダーには追加したロゴやボタンは反映されません。

添付画像の様に表示させるにはどうしたらいいのでしょうか？

ご回答よろしくお願い致します。

♥ 0

いいねをした人: 居ません

[キタジマ タカシ]

やり方としては2つあると思います。

1つ目はコードでドロップナビ（下に移動した際に表示されるヘッダー）を書き換えてしまうことです。
My Snow Monkey プラグイン、もしくは子テーマの functions.php に下記のコードを追加してください。

add_action(
	'snow_monkey_get_template_part_template-parts/nav/drop',
	function() {
		if ( ! \Framework\Helper::has_drop_nav() ) {
			return;
		}
		?>
		<div class="p-drop-nav">
			<div class="c-container">
				<div class="c-row c-row--margin c-row--middle">
					<div class="c-row__col c-row__col--fit">
						<?php \Framework\Helper::get_template_part( 'template-parts/header/site-branding' ); ?>
					</div>
					<div class="c-row__col c-row__col--auto">
						<?php
						\Framework\Helper::get_template_part(
							'template-parts/nav/global',
							null,
							[
								'_vertical'          => false,
								'_gnav-hover-effect' => get_theme_mod( 'gnav-hover-effect' ),
							]
						);
						?>
					</div>
					<div class="c-row__col c-row__col--fit">
						<?php
						if ( get_theme_mod( 'header-content' ) ) {
							\Framework\Helper::get_template_part( 'template-parts/header/content', 'lg' );
						}
						?>
					</div>
			</div>
		</div>
		<?php
	}
);

そして、カスタマイザー → 追加 CSS に下記の CSS を追加してください。

.p-drop-nav .c-navbar {
  justify-content: flex-start;
}

この1つ目のデメリットは、アップデートでドロップナビに変更があったときに、追加したコードの方にもその変更を反映していかないといけないことです。例えばアップデートでドロップナビのクラス名が変わったとしたら、追加したコードの方でもクラス名を変えないとレイアウトが崩れてしまうことになります。

そこで2つ目の方法ですが、そもそもドロップナビを使わずにヘッダーを上部固定にしてしまうのが良いのではと思いました。
カスタマイザー → デザイン → ヘッダー → ヘッダーレイアウトを1行に変更
カスタマイザー → デザイン → ヘッダー → PC 用ヘッダー位置を上部固定に変更
これならスクロールしても常にロゴとヘッダーコンテンツが表示されます。

♥ 1

いいねをした人: 居ません

[永田朗]

キタジマ タカシさん

ご回答ありがとうございます。

２つ目のやり方でやりたかったことが出来ました。

ありがとうございました。

♥ 0

いいねをした人: 居ません

[投稿者]

投稿