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

このトピックには4件の返信、3人の参加者があり、最後にうなこにより4年、 8ヶ月前に更新されました。

5件の投稿を表示中 - 1 - 5件目 (全5件中)

投稿者

投稿
2020年3月5日 11:53 AM #35001

oy
参加者

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

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

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

2020年3月5日 12:14 PM #35003
うなこ
モデレーター
モバイルはウィジェットから設定できます。

外観 > カスタマイズから
「ウィジェット」パネル > 「モバイルナビ上部」パネルからVKボタンウィジェットなど、お好きなウィジェットを設定すると、モバイルの上部に表示できます。
- この返信は4年、 8ヶ月前にうなこが編集しました。
- この返信は4年、 8ヶ月前にうなこが編集しました。
- この返信は4年、 8ヶ月前にうなこが編集しました。
2020年3月6日 7:28 AM #35055
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;
	}
}
```
- この返信は4年、 8ヶ月前にDRILL LANCERが編集しました。
2020年3月9日 10:39 AM #35121

oy
参加者

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

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

2020年3月9日 11:04 AM #35124

うなこ
モデレーター

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

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

投稿