[yuki-egami]

【お使いの Snow Monkey のバージョン】14.3.5
【お使いの Snow Monkey Blocks のバージョン】11.4.1
【お使いの Snow Monkey Editor のバージョン】5.0.6
【お使いのブラウザ】chrome

### 実現したいこと

トップページ（HOME）のグローバルメニュー位置の変更したいです。

下記画像の様にメニュー位置をメインコンテンツ画像の下にする場合にはどの様にするのが最適でしょうか？アドバイス頂けると幸いです。よろしくお願い致します。

 

♥ 0

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

[GONSY]

こちらが参考になると思います！

トップにフル幅のスライダーを設置して、その下にロゴとヘッダーを設置したい。

このトピックには6件の返信、2人の参加者があり、最後にKokodarwinにより4ヶ月、 1週前に更新されまし…

snow-monkey.2inc.org

♥ 1

いいねをした人:

[yuki-egami]

GONSYさん

コメントありがとうございます。参考にさせて頂いたところ、配置は上手くいきました！
しかし、なぜか下にスクロールしたら表示されるグローバルメニューがスクロールしなくても上部にファーストビューで表示され、画像下に配置したメニュー付近にスクロールすると消え、さらにメニュー下へスクロールすると表示されます。（説明がわかりずらく申し訳ありません。）

本来のスクロールされると表示される様にするにはどうしたら良いでしょうか？

♥ 0

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

[GONSY]

参考のとおり、メインビジュアルをスライダー（ショートコード）で設定されてますでしょうか？

♥ 1

いいねをした人:

[GONSY]

あ！
これ、グローバルナビゲーションが画面内に見えていないとドロップナビが表示される仕様なのかもです。。。
気づかなかった。。。(≧∇≦)
ちょっと探ってみますが、どなたか良いアイディアがあったらよろしくお願いします！

♥ 1

いいねをした人:

[キタジマ タカシ]

ドロップナビは Snow Monkey Diet プラグインで無効化できます、それが一番簡単です。トップページだけ無効化したいということであればコードを書く必要がありますね。

add_filter(
	'snow_monkey_pre_template_part_render_app/setup/drop-nav',
	function( $return ) {
		if ( is_front_page() ) {
			return false;
		}
		return $return;
	}
);

add_filter(
	'snow_monkey_has_drop_nav',
	function( $return ) {
		if ( is_front_page() ) {
			return false;
		}
		return $return;
	}
);

♥ 2

いいねをした人:

[yuki-egami]

GONSYさま
キタジマさま

コメントありがとうございます。
無効化するのが一番簡単との事ですが、先述のデザインでドロップナビを無効化せずに通常通りに表示する事は難しいでしょうか？

♥ 0

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

[GONSY]

ちょうど私も似たようなことをしていたので、強引な手法だと思いますが、以下の方法でやってみました。
 

1. 【カスマイズ】→【デザイン】→【ヘッダー】の「PC用ヘッダー位置」は『上部固定』に設定。
   モバイル用もハンバーガーメニューの常設が必要なので、同じく『上部固定』です。
   同じ設定画面内の「ヘッダーレイアウト」は『中央ロゴ』としています。
2. 次にグローバルナビゲーションの上にスライダーなどを設置するのは、トップページですが、スマートフォンのときはハンバーガーメニューも下がってしまうため、スマートフォン対策として、トップページ用の固定ページに、画像やスライダーなどのブロックを上部に設置し、右メニュー【表示設定（ウィンドウサイズ）】で、スマートフォンだけ表示するようにしておきます。
3. 次にトップページのグローバルナビゲーションの上に設置するスライダーなどですが（推奨できる方法ではないと思います）、snow_monkey_prepend_bodyを使いました。

※スライダーを、body直下に挿入してしまえ！という方法です。

今回はプラグイン「XO Slider」を使用しているので、生成されるショートコードを入れました。

XO Slider (旧名: XO Liteslider)

XO Slider はスライダーを簡単に作成できるプラグインです。

ja.wordpress.org

add_action(
	'snow_monkey_prepend_body',
	function() {
		if ( is_front_page() ) { // トップページのみ
			if ( ! wp_is_mobile() ) { // モバイルデバイスでない
			echo do_shortcode( '[xo_slider id="XXX"]' );
			}
		}
	}
);

これでトップページのグローバルナビゲーションの上にスライダーが表示されました。設定で『上部固定』になっているので、ドロップナビも表示されません。

ただこのままだと、ほかのページで上部固定になってしまいますので、トップページ以外は「PC用ヘッダー位置」を『ノーマル』になるようにフィルターフックで調整します。

add_filter(
	'theme_mod_header-position-lg',
	function( $value ) {
		if ( ! is_front_page() ) {
			return ''; // ノーマル
		}
		return $value;
	}
);

トップページだけ（スクロールした際の）ナビゲーションの見え方が異なりますが、私はこれで落ち着きました。
欲を言えば、スクロールしてナビゲーションが停止した時点で、ロゴを小さくしたりできればベターかもしれません。

♥ 4

いいねをした人:

[yuki-egami]

GONSYさん

コメントありがとうございます。上記、アドバイス頂いた手法を参考にさせて頂きます。ありがとうございました！

♥ 1

いいねをした人:

[投稿者]

投稿