[ 解決済 ] スクロール時のグローバルメニューにロゴを表示させたい

VWSとは フォーラム Lightning [ 解決済 ] スクロール時のグローバルメニューにロゴを表示させたい

[ 解決済 ] スクロール時のグローバルメニューにロゴを表示させたい

  • このトピックには6件の返信、3人の参加者があり、最後にavusblueにより3年、 2ヶ月前に更新されました。
7件の投稿を表示中 - 1 - 7件目 (全7件中)
  • 投稿者
    投稿
  • #50039

    avusblue
    参加者

    ■ 利用テーマとバージョン :
    ・Lightning バージョン: 14.0.3 (G3β)
    ・Origin III (Beta)

    ■ 質問内容:
    Lightning G3にてOrigin III (Beta)を選択しています。

    スクロール時のグローバルメニューのレイアウトを
    左側にロゴ、右側にメニュー(Origin)のようにすることは可能でしょうか?

    DRILL LANCERさんの記事を参考に変更してみたのですが、うまく表示できませんでした。
    コード内origin2の記述をorigin3へ変更しました。

    /**
     * Origin II で Origin のヘッダー固定仕様.
     */
    function lightning_revive_origin_header_scroll_at_origin3() {
    	// Origin II のヘッダー固定を解除 ( 必須 ).
    	remove_filter( 'lightning_localize_options', 'lightning_origin3_add_js_option', 10, 1 );
    	// Origin のヘッダー固定を復活 ( 必須 ).
    	remove_filter( 'lightning_headfix_enable', 'lightning_origin3_headfix_disabel' );
    	// Origin のヘッダー伸縮を復活 ( 任意 ).
    	remove_filter( 'lightning_header_height_changer_enable', 'lightning_origin3_header_height_changer_disabel' );
    }
    add_action( 'init', 'lightning_revive_origin_header_scroll_at_origin3' );

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

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

    #50170

    DRILL LANCER
    モデレーター

    Lightning G3 では古いコードはごっそり削ぎ落としています。

    ヘッダーの固定解除までは現状可能ですが、その後に Origin 風のヘッダー固定形式を適用するのはその部分のコードが削ぎ落とし対象になったため現状不可能です。

    それでは失礼します。

    #50173

    avusblue
    参加者

    DRILL LANCERさん
    返信ありがとうございます!
    Origin風のメニューは現状不可とのこと承知しました。

    ヘッダー固定解除だけでもと思い、下記のようにしてみたのですが、固定解除されませんでした。
    お忙しいところ恐縮ですが、固定解除部分についてお教え願えませんでしょうか。

    function lightning_revive_origin_header_scroll_at_origin3() {
    	// Origin II のヘッダー固定を解除 ( 必須 ).
    	remove_filter( 'lightning_localize_options', 'lightning_origin3_add_js_option', 10, 1 );
    }
    add_action( 'init', 'lightning_revive_origin_header_scroll_at_origin3' );

    よろしくお願いいたします。

    #50174

    DRILL LANCER
    モデレーター

    ヘッダー固定解除のみなら下記でいけると思います。

    
    function lightning_disable_origin3_header_scroll() {
    	// Origin III のヘッダー固定を解除.
    	remove_filter( 'lightning_localize_options', 'lightning_global_nav_fix', 10, 1 );
    }
    add_action( 'init', 'lightning_disable_origin3_header_scroll' );
    
    • この返信は3年、 2ヶ月前にDRILL LANCERが編集しました。理由: 関数名変更
    #50176

    下記でおそらくご希望の状態になるのではないかと思います。

    .header_scrolled .global-nav-list {
        background-image: url(ロゴ画像のURL);
        background-repeat: no-repeat;
        background-size: 130px;
        background-position: 0 50%;
    }
    .header_scrolled .global-nav .global-nav-list {
        -webkit-box-pack: end;
        -ms-flex-pack: end;
        justify-content: flex-end;
    }
    /* 以下メニュー貫通レイアウトの時のみ */
    .header_scrolled .global-nav .global-nav-list>li{
        width:auto;
    }
    .header_scrolled .global-nav .global-nav-list>li {
        border-right: none;
    }
    .header_scrolled .global-nav .global-nav-list>li:first-child {
        border-left: none;
    }
    #50201

    avusblue
    参加者

    DRILL LANCERさん

    このコードで、固定解除できました。
    ありがとうございます!

    • この返信は3年、 2ヶ月前にavusblueが編集しました。
    #50202

    avusblue
    参加者

    石川さん

    ロゴ付きのメニューが表示できました。
    CSSだけでできるんですね。
    ありがとうございます!

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