サイト表示時にグローバルナビが一瞬動く（広がる）現象を修正したい。

[まき]

■ WordPress のバージョン
WordPress 6.9.1

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

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

■ テーマのバージョン
15.33.1

■ Pro Unit のバージョン
0.29.10

■ スキンの種類
Origin III

■ 期待する動作
この度もお世話になります。

サイト表示時にグローバルナビが一瞬動く（広がる）現象を修正したいです。

■ 自分で試した事
下記、追加CSSにてヘッダーをカスタマイズしています。
AIに相談すると、このCSSが原因でグローバルナビが一瞬動く（広がる）現象が起きているような回答になります。しかし、AIでは修正出来ず質問させていただきました。

———————————————-

ヘッダーを全幅にして、100％→95％に設定しています。
↓
/*——————————–
ヘッダーコンテナとヘッダートップを全幅
———————————*/
.header-top .container,
.site-header-container{
width: 95%;
max-width: 100%;
}

/*リンク領域をロゴのみに*/
.site-header .site-header-logo{
width: fit-content;
}

/*ヘッダーロゴ上下余白*/
.site-header-logo {
text-align: left;
       padding-top: 1.1rem;
margin-bottom: 1.1rem;
margin-left: 0;
}

———————————————-

モバイル時はヘッダーを固定にしています。
そして、PCサイトのページヘッダーが透過と透過無しと混在しているため、全ページ統一でヘッダー透過無しにしています。
このCSSはAIで作成したものです。
↓
/*********************
モバイル時（～991.98px）
– ヘッダー固定
*********************/
@media (max-width: 991.98px) {
/* ————————–
ヘッダー固定（共通）
—————————*/
.site-header{
position: fixed !important;
background: #fff !important;
top:0px;
}
.header_scrolled .site-header-logo {
display: block;
}
.site-header + * {
margin-top:52px !important;
}

/* ————————–
ロゴ切り替え
—————————*/

/* 元画像を透明化して背景画像に置き換える準備 */
.site-header-logo img {
opacity: 0;
width: auto !important;
height: auto !important;
}

/* ロゴ背景を使用 */
.site-header-logo a span {
display: block;
width: fit-content;
height: 38px;
background-size: contain;
background-repeat: no-repeat;
background-position: center;

/* 通常時ロゴ */
background-image: url(“https:◯◯◯◯◯◯◯◯◯◯”);
}
}

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

■ 実際の症状
キャッシュ系プラグインのCSS最適化などはオフにしています。
AI提案の修正CSSも沢山試しましたが修正できませんでした。

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

---

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

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

[瀬戸内ことり]

ご利用のサーバーはエックスサーバーでしょうか？
であれば、XPageSpeed の設定をご確認ください。
https://www.xserver.ne.jp/manual/man_server_xpagespeed.php

(「サイト表示の前に一瞬、管理画面が表示される」現象に悩まされたことがあり、こちらを切ることで解決しました。

が･･･違ったらすみません！)

[投稿者]

投稿