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

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

[DRILL LANCER]

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

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

それでは失礼します。

[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' );

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

[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' );

[石川＠Vektor,Inc.]

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

.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;
}

[avusblue]

DRILL LANCERさん

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

[avusblue]

石川さん

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

[投稿者]

投稿