[ 解決済 ] ヘッダーコンタクト設定について

[山本隆]

■ WordPress のバージョン
WordPress 5.8.2 (lightning Child テーマ)

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

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

■ テーマのバージョン
バージョン: 14.11.4

■ Pro Unit のバージョン
バージョン 0.13.2

■ スキンの種類
Origin III

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

■ プラグインの種類・バージョン

■ 期待する動作
ライトニングの初心者です。
ヘッダー設定で『ヘッダーコンタクト＆ナビ貫通』に設定にしています。パソコンでは、見えている電話番号とお問合せアイコンがモバイル（safari）では表示されません。パソコンでブラウザの幅を狭くしても同じです。電話番号とお問合せアイコンをモバイルで折り返し表示する方法をご教示いただけますでしょうか？

お手数ですがよろしくお願いします。

■ 自分で試した事
ヘッダーの高さをＣＳＳで調整しましたが、高さを広げても、電話番号等の要素は表示されません。

■ 症状が発生するブラウザ
sarari／Chrome

■ 実際の症状
モバイルで参照すると『ヘッダーコンタクト＆ナビ貫通』で設定した電話番号とお問合せアイコンが表示されません。

[うなこ]

モバイルではモバイル固定ナビを固定表示することができるので、こちらを使用するのがお勧めですが、もし電話番号とお問合せボタンの同じレイアウトを表示させたいということでしたら、別途、ウィジェットで設置する形になります。

【やり方】
その１：ハンバーガーメニューを展開した時に、モバイルナビ上部orモバイルナビ下部に表示する方法
カスタマイズ→ウィジェット　の「モバイルナビ上部」もしくは「モバイルナビ下部」の＋ボタンを押して、検索窓に「従来のウィジェット」と入れてください。選択項目が出てきますので、「VK お問合せセクション」を入れて、「更新」ボタンをおしてください。
モバイルで確認すると、メニューの中のナビの上か下に、お問合せセクションが表示されます。

その２:常に画面下部に固定で表示したい場合
カスタマイズ→ウィジェット　の「モバイル固定ナビ ウィジェットエリア」の＋ボタンを押して、検索窓に「従来のウィジェット」と入れてください。選択項目が出てきますので、「VK お問合せセクション」を入れて、「更新」ボタンをおしてください。
モバイルで確認すると、画面の下部に、お問合せセクションが表示されます。
この方法ですと、結構幅をとるので、モバイルでは邪魔になりますので、お問合せボタンなどを設置するくらいにして、電話などはモバイル固定ナビに設置するのがいいのかなと思います。

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

[石川＠Vektor,Inc.]

参考

基本的に「モバイル固定ナビで問い合わせボタンも電話リンクも配置出来るのでヘッダーには必要ない」という意図で現状の仕様になっています。

モバイル固定ナビ

モバイルナビの中に問い合わせ情報を表示する

Lightning 基本設定解説 ナビゲーションの設定

以下で表示はできますが、レイアウトは別途調整する必要があります。

@media (max-width: 991px){
	.site-header-sub {
		display:block
	}
}

できる！CSSカスタマイズ

[山本隆]

石川様

ありがとうございました。動画も見ました。大変勉強になりました。

[山本隆]

うなこ様

早々のご返信、ありがとうございました。実際試してみて、実現できました。
ありがとうございました。

[投稿者]

投稿