LP作成時、モバイルに表示されるハンバーガーメニュを非表示に出来ない。

VWSとは フォーラム Lightning LP作成時、モバイルに表示されるハンバーガーメニュを非表示に出来ない。

LP作成時、モバイルに表示されるハンバーガーメニュを非表示に出来ない。

  • このトピックには7件の返信、2人の参加者があり、最後にカゲにより4年、 12ヶ月前に更新されました。
8件の投稿を表示中 - 1 - 8件目 (全8件中)
  • 投稿者
    投稿
  • #21653

    カゲ
    参加者

    表題の件に関しましての質問です。

    ランディングページを作成した場合、モバイルにて作成した該当のLPを見ると、
    左上にハンバーガーメニュが出てしまいます。【CSSで非表示設定済み】

    この件に関しましてヘッダーやグローバルメニュを非表示にする方法が乗っている
    こちらのサイトの記事などを参考にしましてCSSで対策をしてみました。

    BizVektorかLightningのランディングページテンプレートでヘッダーを非表示にする方法

    BizVektorかLightningのランディングページテンプレートでヘッダーを非表示にする方法

    この記事の通りに設定しますと、確かにPCから閲覧した表示では、グローバルメニュもハンバーガーメニュは非表示になりますが、モバイルから見た場合、ハンバーガーメニュは表示されてしまいます。

    ちなみに、記事の中にあるCSSカスタマイズのやり方の中で、私は以下のやり方でCSSをカスタマイズしました。

    【VK ExUnit → CSSカスタマイズなどに下記を貼り付けます】

    どうしても作ったLPのモバイルのハンバーガーメニュの表示を非表示にしたかったので、いろいろ検索をしてこちらの
    フォーラムの解決策を発見して試してみました。

    [ 解決済 ] メニューの無い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;
    }

    #21655

    DRILL LANCER
    モデレーター

    こんな感じでいかがでしょうか?

    /*ヘッダー部分見えなくする*/
    .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">となっている状態の時、
    両方を指定条件に含める際に使用します。

    #21656

    カゲ
    参加者

    こんにちわ、さっそく返信ありがとうございます。
    今確認しましたところ、クロームの検証でスマホのエミュレート画面にて見た所、確かにハンバーガーメニュは消えていました。
    よって、問題解決したかな、と思い自分の携帯電話(アイフォン5)のサファリのプライベートモードにて見ましたところ、ハンバーガーメニュが表示されていました。

    キャッシュかな、と思ったので【グーグル広告】内の広告がシミレーション表示されている画面を見ましたところやはり表示されていました。

    クロームの検証画面では非表示になっているけども、実機では出ています。これはどういうことなのか悩んでいます。

    #21657

    カゲ
    参加者

    今、改めて提案頂いた二つをCSS記述項目にコピペをし直して、検証画面を確認したところ、PC表示画面でF5で更新するとハンバーガーメニュ表示は消えますが、スマホ表示画面でF5を押すとメニュが出てきます。

    そのままPC表示画面に切り替えますとまたメニュが表示されるような状態です。

    尚実機の方ではどのようにしてもメニュが消えません。

    以上、試した結果を投稿させていただきました。

    #21659

    DRILL LANCER
    モデレーター

    下記のいずれかを適用してみてください。

    /*ヘッダー部分見えなくする*/
    .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;
    }
    #21662

    カゲ
    参加者

    早速ご返信ありがとうございます。

    下記のコードで試しました。
    ——————————–
    /*ヘッダー部分見えなくする*/
    .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表示、モバイル表示共にハンバーガーメニュの非表示が確認できました。
    実機に関しても、私が持っている実機では非表示が確認できました。

    後は自宅に帰って別の実機でも試してみたいと思います。ありがとうございます。

    ちなみに、私が最初に記載していたコード、そしてご提示いただいた最初のコードではハンバーガーメニュの非表示が出来なかったのは何故なのでしょうか?
    よろしければ勉強のために伺えると幸いです。

    #21667

    DRILL LANCER
    モデレーター

    .device-mobile.page-id-581のようにひっつけて書くのと
    .page-id-581 .vk-mobile-nav-menu-btnのように半角スペース1つ分離して書くのでは意味が異なります。

    前者のようにクラス名同士をひっつけて書く書き方は、同じ要素内にある複数のクラス等を抽出する際に使い、
    後者のようにクラス名同士を離して書く書き方は、該当要素の子要素(内側にある要素)のクラスを抽出する際に使います。

    今回の場合、body 要素に device-mobile と page-id-581 が存在し、
    その内側にある div 要素に vk-mobile-nav-menu-btn が存在したため先述のようなコードになりました。

    #21694

    カゲ
    参加者

    こんにちわ、ご返信ありがとうございます。
    とても勉強になりました。スペースがあると意味合いが変わると言う事は想像しませんでした。
    他の携帯端末から見ても非表示も確認できましたので本当に助かりました。

    また何かありましたらよろしくお願いいたします

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