ヘッダー上部がスマホ閲覧時に消えてしまう

[oy]

お世話になっております。
Webサイト日本語版、サブディレクトリにもWordpressを構築し、英語版も作成いたしました。
日本語版から英語版へ移動するためにヘッダー上部のお問い合わせボタンを利用して
リンクを英語版Webサイトに飛ぶようにいたしました。

しかしスマホから閲覧した際にヘッダー上部部分が消えてしまいます。
キャッチコピーも消えてしまいます。
みなさまどのように対応しているのでしょうか。

使用テーマ：lightning Pro
使用ブラウザ：Choroem

[うなこ]

モバイルはウィジェットから設定できます。

外観 > カスタマイズから
「ウィジェット」 パネル > 「モバイルナビ上部」 パネルからVKボタンウィジェットなど、お好きなウィジェットを設定すると、モバイルの上部に表示できます。

[DRILL LANCER]

ヘッダートップの右側（メニュー＆各種お問い合わせ）はモバイルナビ側で対処するとして、
キャッチコピーは私は下記 CSS を適用することで対応予定（←まだローカル環境でのテスト段階なので）です。

@media (max-width: 991px) {

	.headerTop {
		color: #666;
		background-color: #f9f9f9;
		margin-top: -7px;
		border-bottom: 1px solid #f3f3f3;
		display: block;
	}

	.headerTop .container {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		overflow: visible;
		margin: 0 auto;
	}

	.headerTop .headerTop_description {
		position: relative;
		top: 7px;
		display: block;
		margin: 0;
		padding: 7px 45px calc(7px + 7px);
		width: 100%;
		line-height: 1.4em;
		text-align: center;
		white-space: nowrap;
	}

	.headerTop nav,
	.headerTop_contactBtn {
		display: none;
	}

	.siteHeader .headerTop .container {
		padding: 0 15px;
	}
}

ヘッダーロゴが折り返さないのでキャッチコピーも折り返さないようにしています。
（上記コードに含まれる下記指定部分）

@media (max-width: 991px) {
	.headerTop .headerTop_description {
		white-space: nowrap;
	}
}

[oy]

unako様
回答ありがとうございます。
私の場合VKお問い合わせボタンしかボタンがないようで、ヘッダー上部のボタンをと内容が違うようでした。
しかし画像でボタンに見えるようにしてみようかと思います。

DRILL LANCER様
回答ありがとうございます。
キャッチコピーの表示を試してみます！

[うなこ]

私の場合VKお問い合わせボタンしかボタンがないようで、ヘッダー上部のボタンをと内容が違うようでした。

この動画のような、「VK_ボタン」　というウィジェットは表示されていないでしょうか

[投稿者]

投稿