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

VWSとは フォーラム Lightning [ 解決済 ] ヘッダーメニューをヘッダー画像下に表示したい

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

6件の投稿を表示中 - 1 - 6件目 (全6件中)
  • 投稿者
    投稿
  • #66751

    ちゃん つむ
    参加者

    ■ 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はフォーラムライセンスが有効のユーザーにのみ表示されます

    #66767

    石川@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カスタマイズ

    #66771

    ちゃん つむ
    参加者

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

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

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

    Attachments:
    You must be logged in to view attached files.
    #66773

    石川@Vektor,Inc.
    キーマスター

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

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

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

    #66776

    ちゃん つむ
    参加者

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

    #66777

    石川@Vektor,Inc.
    キーマスター

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

6件の投稿を表示中 - 1 - 6件目 (全6件中)
  • このトピックに返信するにはログインが必要です。