LP作成時、モバイルに表示されるハンバーガーメニュを非表示に出来ない。
LP作成時、モバイルに表示されるハンバーガーメニュを非表示に出来ない。
- このトピックには7件の返信、2人の参加者があり、最後に
により5年、 2ヶ月前に更新されました。
-
投稿
-
表題の件に関しましての質問です。
ランディングページを作成した場合、モバイルにて作成した該当のLPを見ると、
左上にハンバーガーメニュが出てしまいます。【CSSで非表示設定済み】この件に関しましてヘッダーやグローバルメニュを非表示にする方法が乗っている
こちらのサイトの記事などを参考にしましてCSSで対策をしてみました。BizVektorかLightningのランディングページテンプレートでヘッダーを非表示にする方法
この記事の通りに設定しますと、確かにPCから閲覧した表示では、グローバルメニュもハンバーガーメニュは非表示になりますが、モバイルから見た場合、ハンバーガーメニュは表示されてしまいます。
ちなみに、記事の中にあるCSSカスタマイズのやり方の中で、私は以下のやり方でCSSをカスタマイズしました。
【VK ExUnit → CSSカスタマイズなどに下記を貼り付けます】
どうしても作ったLPのモバイルのハンバーガーメニュの表示を非表示にしたかったので、いろいろ検索をしてこちらの
フォーラムの解決策を発見して試してみました。[ 解決済 ] メニューの無いLPページを作る際、スマホ時に表示されるモバイルメニューを非表示にしたい
この方法を試すと、確かにモバイルのLPの表示からハンバーガーメニュは非表示になるのですが、しかしながら特定のLPのページだけではなくて、メインサイトのモバイル表示のハンバーガーメニュも非表示になってしまいます。
なので、上記方法は適切ではないなと思いました。
よって、ハンバーガーメニュを消したい特定のLPのモバイルのページIDがCSS内で設定が間違えているのかと思って何度も設定してみますが、特定のLPにおいてモバイルの表示の際のハンバーガーメニュだけ非表示になりません。
こちらの解決策に関してご教示頂けると助かります。
以下CSSの記載した内容になります。
この記述でPCから見た場合はヘッダーおよびグローバルメニュは非表示、そして余白も無くなっています。/*ヘッダー部分見えなくする*/
.page-template header.siteHeader {
display:none;
}/*ヘッダー部分のスペース削除*/
.page-template .siteContent { margin-top:0 !important; }/*メニュを見えなくする*/
.page-id-581.vk-mobile-nav-menu-btn{
display:none;
}こんな感じでいかがでしょうか？
/*ヘッダー部分見えなくする*/ .page-id-581 header.siteHeader { display:none; } /*ヘッダー部分のスペース削除*/ .page-id-581 .siteContent { margin-top:0 !important; } /*メニュを見えなくする*/ .page-id-581 .vk-mobile-nav-menu-btn { display: none; }すべてのLPに反映させる場合は下記のようにすると良いかもしれません。
/*ヘッダー部分見えなくする*/ .page-template-page-lp header.siteHeader { display:none; } /*ヘッダー部分のスペース削除*/ .page-template-page-lp .siteContent { margin-top:0 !important; } /*メニュを見えなくする*/ .page-template-page-lp .vk-mobile-nav-menu-btn { display: none; }P.S.
.page-id-581.vk-mobile-nav-menu-btnのような記述は、
例えば、<body class="page-id-581 vk-mobile-nav-menu-btn">となっている状態の時、
両方を指定条件に含める際に使用します。こんにちわ、さっそく返信ありがとうございます。
今確認しましたところ、クロームの検証でスマホのエミュレート画面にて見た所、確かにハンバーガーメニュは消えていました。
よって、問題解決したかな、と思い自分の携帯電話（アイフォン5）のサファリのプライベートモードにて見ましたところ、ハンバーガーメニュが表示されていました。キャッシュかな、と思ったので【グーグル広告】内の広告がシミレーション表示されている画面を見ましたところやはり表示されていました。
クロームの検証画面では非表示になっているけども、実機では出ています。これはどういうことなのか悩んでいます。
今、改めて提案頂いた二つをCSS記述項目にコピペをし直して、検証画面を確認したところ、PC表示画面でF５で更新するとハンバーガーメニュ表示は消えますが、スマホ表示画面でF5を押すとメニュが出てきます。
そのままPC表示画面に切り替えますとまたメニュが表示されるような状態です。
尚実機の方ではどのようにしてもメニュが消えません。
以上、試した結果を投稿させていただきました。
下記のいずれかを適用してみてください。
/*ヘッダー部分見えなくする*/ .page-id-581 header.siteHeader { display:none; } /*ヘッダー部分のスペース削除*/ .page-id-581 .siteContent { margin-top:0 !important; } /*メニュを見えなくする*/ .device-mobile.page-id-581 .vk-mobile-nav-menu-btn { display: none; }/*ヘッダー部分見えなくする*/ .page-template-page-lp header.siteHeader { display:none; } /*ヘッダー部分のスペース削除*/ .page-template-page-lp .siteContent { margin-top:0 !important; } /*メニュを見えなくする*/ .device-mobile.page-template-page-lp .vk-mobile-nav-menu-btn { display: none; }早速ご返信ありがとうございます。
下記のコードで試しました。
——————————–
/*ヘッダー部分見えなくする*/
.page-id-581 header.siteHeader {
display:none;
}/*ヘッダー部分のスペース削除*/
.page-id-581 .siteContent {
margin-top:0 !important;
}/*メニュを見えなくする*/
.device-mobile.page-id-581 .vk-mobile-nav-menu-btn {
display: none;
}
————————————————クロームの検証画面でPC表示、モバイル表示共にハンバーガーメニュの非表示が確認できました。
実機に関しても、私が持っている実機では非表示が確認できました。後は自宅に帰って別の実機でも試してみたいと思います。ありがとうございます。
ちなみに、私が最初に記載していたコード、そしてご提示いただいた最初のコードではハンバーガーメニュの非表示が出来なかったのは何故なのでしょうか？
よろしければ勉強のために伺えると幸いです。.device-mobile.page-id-581のようにひっつけて書くのと
.page-id-581 .vk-mobile-nav-menu-btnのように半角スペース１つ分離して書くのでは意味が異なります。前者のようにクラス名同士をひっつけて書く書き方は、同じ要素内にある複数のクラス等を抽出する際に使い、
後者のようにクラス名同士を離して書く書き方は、該当要素の子要素（内側にある要素）のクラスを抽出する際に使います。今回の場合、body 要素に device-mobile と page-id-581 が存在し、
その内側にある div 要素に vk-mobile-nav-menu-btn が存在したため先述のようなコードになりました。
- このトピックに返信するにはログインが必要です。
