[ 解決済 ] スマホでのメニューが表示されない

[nookie_irish]

投稿前に以下の点を確認ください

■ よくある質問ページに関連の記載がないか確認してください。

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

■ 子テーマをご利用の場合は親テーマに変更して症状が改善するか確認してください。

■ 関連しそうなプラグインを一つづつ停止して症状が改善するか確認してください。

■ 症状が発生するブラウザ :Safari（スマホ版）

■ 利用テーマとバージョン :
Lightning Pro 8.6.0
Lightning Skin JPNSTYLE 8.0.0

■ 質問内容：
スマホで見たときのヘッダーメニューが表示されません。
左上をクリックするとメニューが出るのですが、隠しメニューのようになってしまっています。
導入当初は表示されていたのでバグだと思われます。
表示のさせ方を教えてください。

• このトピックはnookie_irishが3年、 2ヶ月前に変更しました。

Attachments:

You must be logged in to view attached files.

---

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

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

[石川＠Vektor,Inc.]

確認したところ

* ヘッダー背景を追加CSSで白にカスタマイズしているので、ボタンが白で見えなくなっている
* JPNSTYLEの背景処理にも問題がある

という状態でしたので改修しております。
月曜日頃に修正版リリース予定です。
今しばらくお待ちくださいませ。

[石川＠Vektor,Inc.]

おまたせいたしました。

1. Lightning Pro 8.7.1 にアップデートしてください。
2. JPNSTYLE 8.1.0 にアップデートしてください。
3. 独自に header.siteHeader{ background:#ffffff;} を指定していると思いますので削除してください。
4. 外観 > カスタマイズ > Lightning JPNSTYLE設定 でフッターの色を指定してください（ヘッダーの色も一緒に変更されます）
5. 外観 > カスタマイズ > Lightning ヘッダー設定 でヘッダーの背景を白に指定して上書きしてください。

以上ご確認よろしくお願いいたします。

[nookie_irish]

ご対応ありがとうございます。
＞5. 外観 > カスタマイズ > Lightning ヘッダー設定 でヘッダーの背景を白に指定して上書きしてください。
上記件ですが、「Lightning ヘッダー設定」というメニューは見当たりません。
「Lightning ページヘッダー設定」で背景を白にしても色が変わりませんでした。
どうすればよいのかご教授ください。

Attachments:

You must be logged in to view attached files.

[nookie_irish]

これがそのときの画像です。
1～4までは行いました。
よろしくお願い致します。

Attachments:

You must be logged in to view attached files.

[石川＠Vektor,Inc.]

デザインスキンは何を利用していますか？
JONSTYLE II ではなく JPNSTYLE になっていないか確認ください。

もし II でない場合、保存して画面を再読み込みすると Lightning ヘッダー設定 が表示されるはずです。

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

[nookie_irish]

JPNSTYLE II を使用しています。
画面をリロードしても「Lightning ヘッダー設定」は表示されませんでした。

[nookie_irish]

JPNSTYLE(Ⅱでない方）でも同様、
「Lightning ヘッダー設定」メニューが表示されません。
画面も再読み込みしております。
何か対処法をご教授いただけますでしょうか。
よろしくお願いいたします。

[石川＠Vektor,Inc.]

失礼しました。勘違いしておりました。
原状JPNSTYLE II ではご指摘の通りヘッダー設定はありませんでした。
追加CSSなどに下記記載くださいませ。

.siteHeader {
	background-color:#fff;
}
.vk-mobile-nav-menu-btn {
	border-color:#333;
	background:url(
	http://localhost:8888/wp-content/themes/lightning-pro/inc/vk-mobile-nav/package/images/vk-menu-btn-black.svg) center 50% no-repeat rgba(255,255,255,0);
}

[nookie_irish]

石川様
ありがとうございます。
上記CSS追加で直りました。
スマホ画面ですが、左上に四角が出てきましたがメニューとわかりずらい状態です。（添付ファイル参照）
テーマかデザインスキン更新よる改善は可能でしょうか？
もしくは他の対策はありますでしょうか？

Attachments:

You must be logged in to view attached files.

[石川＠Vektor,Inc.]

失礼しました。下記でよろしくお願いいたします。

.siteHeader {
	background-color:#fff;
}
.vk-mobile-nav-menu-btn {
	border-color:#333;
	background:url(
	https://shodonomichi.com/wp-content/themes/lightning-pro/inc/vk-mobile-nav/package/images/vk-menu-btn-black.svg) center 50% no-repeat rgba(255,255,255,0);
}

[nookie_irish]

上記のコードを入れましたが、表示はそのままでした。
以下のコードはうまくスタイルが当たるのでURLの表記あたりが何か違うのではないでしょうか。

.siteHeader {
background-color:#fff;
}
.vk-mobile-nav-menu-btn {
border-color:#333;
background-color:#333;
}

[石川＠Vektor,Inc.]

下記でよろしくお願いいたします。

.siteHeader {
	background-color:#fff;
}
.vk-mobile-nav-menu-btn {
	border-color:#333;
	background:url(
	https://shodonomichi.com/wp/wp-content/themes/lightning-pro/inc/vk-mobile-nav/package/images/vk-menu-btn-black.svg) center 50% no-repeat rgba(255,255,255,0);
}

[nookie_irish]

石川様
解決しました。
たびたびの対応ありがとうございました。
非常に助かりました。

[投稿者]

投稿