[ 解決済 ] ヘッダーメニューをヘッダー画像下に表示したい

[ちゃん つむ]

■ WordPress のバージョン
6.0

■ テーマ・プラグインは全て最新版で確認してください。
確認しました。

■ テーマの種類
Lightning ( G3 ) + Lightning G3 Pro Unit

■ テーマのバージョン
14.22.11

■ Pro Unit のバージョン
0.22.2

■ スキンの種類
Origin III

■ 関連しそうなプラグインを一つづつ停止して症状が改善するか確認してください。
確認しました。

■ 期待する動作
ヘッダー画像の下に全幅でメニューを表示したい

■ 自分で試した事
外観からカスタマイズの設定、ヘッダー設定のヘッダーレイアウトを見ても見当たらなかった。

■ 症状が発生するブラウザ
chrome

■ 実際の症状
ヘッダーメニューが下に表示できない

Attachments:

You must be logged in to view attached files.

---

該当URL : https://*********

※該当URLはフォーラムライセンスが有効のユーザーにのみ表示されます

[石川＠Vektor,Inc.]

概念的には

子テーマの functions.php などに スライド / ページヘッダー下部にグローバルメニューを追加 するコードを追加

※ Lightning 14.23.0 以降 G3モードでしか動作しません。

// スライド / ページヘッダー下部にグローバルメニューを追加
add_action(
	'lightning_site_body_before',
	function() {
		if ( class_exists( 'VK_Description_Walker' ) ) {
			wp_nav_menu(
				array(
					'theme_location'  => 'global-nav',
					'container'       => 'nav',
					'container_class' => lightning_get_the_class_name( 'global-nav' ),
					'container_id'    => 'global-nav',
					'items_wrap'      => '<ul id="%1$s" class="%2$s vk-menu-acc global-nav-list nav">%3$s</ul>',
					'fallback_cb'     => '',
					'echo'            => true,
					'walker'          => new VK_Description_Walker(),
				)
			);
		}
	}
);

次に ヘッダーにあるもともとのメニューを非表示にします。
外観 > カスタマイズ > 追加CSS に以下のように追加ます。

header .global-nav {
	display:none;
}

ここから先はスクロールした時のメニューやCSSの修正になりますが、
そのあたりはおそらく好みなどの都合になりますので、よしなにしてください。

できる！CSSカスタマイズ

• この返信は1年、 10ヶ月前に石川＠Vektor,Inc.が編集しました。

[ちゃん つむ]

ありがとうございます！Lightning 14.23.0に更新後に追加しましたら、バッチリ表示されました！大変感謝いたします。

トップページはこれで良いのですが、それに伴い投稿ページなどの下層ページでは、ヘッダーメニューがパンくずリストの下に表示されてしまっているのですが、ヘッダーメニューをパンくずリストの上に表示できないでしょうか？

パンくずリスト設定は、Lightningレイアウト設定からパンくずリスト設定で「ページヘッダーの下」に設定していますが、ヘッダーメニューの下には表示できませんでした。

Attachments:

You must be logged in to view attached files.

[石川＠Vektor,Inc.]

index.php に do_action( ‘********** の記述がある場所に挿入可能です。

必要に応じて条件分岐を調整してみてください。

できる！WordPressカスタマイズ #04 アクションフックを使ったカスタマイズに挑戦！

[ちゃん つむ]

アクションフックを勉強して条件分岐で調整できるかやってみたいと思います。
ありがとうございました。

[石川＠Vektor,Inc.]

コツがわかるとカスタマイズの幅がぐっと広がりますので試してみてください。
もしうまく動かなかったら試したコードを書き込んでいただければ確認いたしますー！

[投稿者]

投稿