サポート » テーマ » Lightningのモバイルメニュー(ハンバーガー)の下にMENUと追記

  • 解決済 fujico

    (@fujico)


    テーマLightningを利用しています。
    スマホで表示した時のハンバーガーメニュー(三)の下にMENUと表示したいです。
    色々調べたのですが、BizVectorフォーラムで似たようなトピックがありました。

    `.siteHeader {
    min-height: 56px;
    }
    .vk-mobile-nav-menu-btn{
    text-indent: inherit !important;
    height:42px !important;
    width:40px !important;
    background-position: top 2px left 6px !important;
    padding-top:24px;
    font-size:10px;
    line-height: 10px;
    font-family: -apple-system, BlinkMacSystemFont, “Helvetica Neue”, YuGothic, “ヒラギノ角ゴ ProN W3”, Hiragino Kaku Gothic ProN, Arial, “メイリオ”, Meiryo, sans-serif;
    text-align: center;
    }
    .vk-mobile-nav-menu-btn.menu-open {
    background-position: top -4px left 0px !important;
    background-size: 12px 12px;
    }

    そのまま追加してみましたが、MENUは表示されるもののクリックし開いた時に×ボタンの位置が左上で小さくなりMENUも表示されたままになってしまいます。
    ×だけにしたいのですが、可能でしょうか?
    □の下にMENUと表示される方法でも構いません。
    他に方法はありますでしょうか?
    どなたかご教示いただけると助かります。

    他の方法で、imgフォルダにあるsvgを同じサイズで作ってみたのですが、スマホで表示してみたら文字が小さ過ぎてダメでした。

    よろしくお願いいたします。

2件の返信を表示中 - 1 - 2件目 (全2件中)
  • こんにちは

    こんな感じでしょうか。

    .vk-mobile-nav-menu-btn.menu-open {
    background-position: top -4px left 0px !important;
    background-size: 12px 12px;
    }

    .vk-mobile-nav-menu-btn.menu-open {
    background-position: top 2px left 0px !important;
    text-indent: -9999px !important;
    }

    ishitakaさん はじめまして こんばんは。
    ご教示ありがとうございます。
    早速差し替えてみたところ、希望通りの表示にする事ができました。

    本当にありがとうございました。

2件の返信を表示中 - 1 - 2件目 (全2件中)
  • トピック「Lightningのモバイルメニュー(ハンバーガー)の下にMENUと追記」には新たに返信することはできません。