VWSとは フォーラム Lightning ヘッダー上部がスマホ閲覧時に消えてしまう

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

  • このトピックには4件の返信、3人の参加者があり、最後にunakoにより6ヶ月、 3週前に更新されました。
5件の投稿を表示中 - 1 - 5件目 (全5件中)
  • 投稿者
    投稿
  • #35001

    oy
    参加者

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

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

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

    #35003

    unako
    モデレーター

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

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

    • この返信は6ヶ月、 3週前にunakoが編集しました。
    • この返信は6ヶ月、 3週前にunakoが編集しました。
    • この返信は6ヶ月、 3週前にunakoが編集しました。
    #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;
    	}
    }
    • この返信は6ヶ月、 3週前にDRILL LANCERが編集しました。
    #35121

    oy
    参加者

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

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

    #35124

    unako
    モデレーター

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

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

5件の投稿を表示中 - 1 - 5件目 (全5件中)
  • このトピックに返信するにはログインが必要です。