[ 質問者返信待ち ] Lightning G3 Pro Unitのグローバルメニュー

[kotaro]

■ WordPress のバージョン
6.2

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

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

■ テーマのバージョン
15.9.0

■ Pro Unit のバージョン
0.24.1

■ スキンの種類
Origin III

■ プラグインの種類・バージョン
Lightning G3 Pro Unitを使用しています。
グローバルメニューでロゴを左にメニューを右寄せがデフォルトで、ロゴを上に、その下に中央寄せでメニューを並べたりはLightning G3 Pro Unitで可能なのですが、ロゴを中央に配置してその左右にグローバルメニューを均等に（３つ＋３つなど）振り分けたいのです。
どなたかやり方がわかる方がいらっしゃればぜひ教えて下さい。

■ 期待する動作
ロゴを中央に配置してその左右にグローバルメニューを均等に（３つ＋３つなど）振り分けたい。

■ 自分で試した事
恐らくｈeader.phpの内容をいじるのだと思いますが自分にはやり方がわかりませんでした。

■ 症状が発生するブラウザ
Chrome、Safari

■ 実際の症状
現状では実現できていません。

[うなこ]

提案なのですが、Lightning G3 Pro Unitの機能を使わずに、ナビゲーションブロックを使用するのはいかがでしょうか。
メニューを設置して、タブレット、スマホ用にも手動で調整する必要がありますので少し手間ではあります、、、

手順としては
・固定ページのLightningデザイン設定の非表示設定は、ヘッダーを表示しないにチェックを入れます。
・固定ページにナビゲーションブロックを配置し、メニューを設置します（添付画像参照）　
・タブレット以下ではハンバーガーメニューになるので、ロゴを「非表示設定」からタブレットサイズ以下を非表示に設定します。

・タブレット以下ではロゴが消えますので、別途ロゴを設置し、非表示設定からPCサイズ（lg xl xxl）を非表示に設定します。

※CSSの調整は必要になってくると思います。

—–

※他のユーザー様も、ご提案がありましたら、ぜひ書き込みお願いいたします。

• この返信は1年、 6ヶ月前にうなこが編集しました。
• この返信は1年、 6ヶ月前にうなこが編集しました。

Attachments:

You must be logged in to view attached files.

[kotaro]

非常に参考になりました！
どうもありがとうございました！！

[対馬 俊彦]

[Lightning ヘッダー設定] → [ヘッダーレイアウト] を [タイトル中央＆ナビ貫通] にして、
以下の CSS を書くやり方でもいけそうです。

/* グローバルナビを上に移動 → この時点ではグローバルナビがロゴ画像に被る */
#global-nav {
    margin-top: -55px;
}

/* 3番目のメニュー項目の右マージンを設定 */
.global-nav-list>li:nth-child(3) {
    margin-right: 110px;
}

/* 4番目のメニュー項目の左マージンを設定 */
.global-nav-list>li:nth-child(4) {
    margin-left: 110px;
}

.site-header-logo {
    /* ロゴ画像を手前に出す */
    position: relative;
    z-index: 1;

    /* ロゴ画像がグローバルナビに被らないようにする */
    width: 200px;
    margin-left: auto;
    margin-right: auto;
}

上記 CSS はグローバルナビのメニュー項目が6個という前提です。

[Vektor,Inc]

kotaroさま、もしこの質問が解決となりましたら「解決済み」にしていただけますと嬉しいです。

解決済みにしますと、ベストアンサーをつけるボタンが表示されていると思いますので、
表示されていたら是非、今回アイディアを出していただいた対馬さんの回答の所にベストアンサーをつけていただけますと嬉しいです。
（モデレーター以上にはベストアンサーが付与できなくなっております。）

[投稿者]

投稿