Lightning Proスマホのメニューが表示されない？

[kaneko]

お世話になります。
Lightning Pro（訪問介護サービス）を利用しています。
スマホのハンバーガーメニューが、四角枠のみしか表示されていないので、フォーラムで調べたところ、以前の回答に「ハンバーガーメニューは諸事情による画像を使用してください」とあったので、追加CSSにて下記を入れ表示させました。
展開するとまた四角枠のみで、下向き矢印などの表示はでません。またスクロールを下げた際、右下下部にでる、上部へ戻るのボタンが黒くなっています。
両方の色が反転しているような感じですが、これはどこで修正できますか？
すみません、初歩的な質問のように思うので、お手数おかけして申し訳ありませんが、
どうぞ宜しくお願い致します。

（追加CSSに入れた内容）
body .vk-mobile-nav-menu-btn {
background-image: url(画像);
}

[DRILL LANCER]

とりあえず、下記を実行してみてください。

• テーマとプラグインを更新してみる
  ↑ インポート直後は古いバージョンがインストールされています。
  ↑ 最新版ならその不具合は起こらないと思います。
• 外観 > カスタマイズ > Lightning デザイン設定 から Origin II を選択してみる
  ↑ Origin 等 Bootstrap 3 ベースのスキン ( II シリーズ以外 )は今後 非推奨 → 廃止 になる可能性があります。

• この返信は4年、 11ヶ月前にDRILL LANCERが編集しました。

[Vektor,Inc]

ハンバーガーメニューは普通に表示されるはずなので、カスタマイズのCSSは特に必要ありません。
RICKさんが記載の通り、とりあえずテーマを最新版にして、画面を再読み込み（ Chromeなら Ctrol + R ）で改善されませんか？

[kaneko]

RICK様、Vektor,Inc様、お忙しいところご丁寧にご回答いただき、有難うございました<m(__)m>
年末の急な予定で終日立て込んでいたため、ご連絡が遅くなり大変失礼致しました。

すみません、まだ対応出来ておりませんが、今週中にはご教授頂きました通り確認したいと思っています。
また進捗をご報告をさせて頂きますので、何卒宜しくお願い申し上げます。

[kaneko]

度々恐れ入ります。
テーマとプラグインの更新をかけてみました（デザイン設定はOrigin IIでした）。
少々レイアウトも変わりましたが（モバイル固定ナビ等も下部に表示へ。右下の上部へ戻るボタンはなくなりました）メニューの部分は以前のまま状態が変わりません（四角枠のみしか表示されていない）。スマホは、iphone6です。
度々で恐縮ですが、もし何かお気付きの点がございましたら、ご教授いただければ幸いです。
どうぞ宜しくお願い致します。

[うなこ]

わたしの環境ではハンバーガーメニュー部分の画像は見えております。
・iPhone8　safariで閲覧

kanekoさんのiPhone6で以下のデモサイトを閲覧したときは
ハンバーガーメニューの画像はでますか？
デモサイト

• この返信は4年、 11ヶ月前にうなこが編集しました。

[kaneko]

unako様

お世話になります。
iphoneで確認しましたら、頂いたURLでスマホメニューの表示は正常でした。
・・・引き続き、原因を探してみます（汗

[DRILL LANCER]

とりあえず、下記のコードを削除した後、下記を試してみてください。

body .vk-mobile-nav-menu-btn {
background-image: url(画像);
}

• キャッシュプラグインを使用している場合はそのキャッシュを削除
• CDNを使用している場合はそのキャッシュを削除
• ブラウザキャッシュを削除

[kaneko]

RICK様

お忙しいところ、度々有難うございます。
ご記載いただいたコードは削除しました。
キャッシュも削除していきます。

皆様からのご意見を参考に、「検証」からデモページと見比べてみました。
それで、svgファイルを読み込まない?ように思いまして、
.htaccessに以下の記述をしてみたところ、「✖」表示がでるようになりましたが、
表示の出方に安定感がなく、クリックして出たりでなかったりです。
—————————
AddType image/svg+xml .svg
AddType image/svg+xml .svgz
—————————

すみません、度々で本当に申し訳ありませんが、
原因の理由の何か参考になりますでしょうか(>_<)

[DRILL LANCER]

デモサイトの vk-mobile-nav の部分の CSS を抜粋すると下記のようになっています。

.vk-mobile-nav-menu-btn {
    background-color: rgba(255,255,255,.8);
}
.vk-mobile-nav-menu-btn {
    position: fixed;
    top: 5px;
    left: 5px;
    z-index: 2100;
    overflow: hidden;
    border: 1px solid #333;
    border-radius: 2px;
    width: 34px;
    height: 34px;
    cursor: pointer;
    text-indent: -9999px;
    background: url(../../inc/vk-mobile-nav/package/images/vk-menu-btn-black.svg) center 50% no-repeat;
    background-size: 24px 24px;
    -webkit-transition: border-color .5s ease-out;
    transition: border-color .5s ease-out;
}

下記コードはあってもなくてもOKなはずなので、../../inc/vk-mobile-nav/package/images/vk-menu-btn-black.svgなどが存在していてちゃんと表示できるか確認してみてください。

AddType image/svg+xml .svg
AddType image/svg+xml .svgz

• この返信は4年、 11ヶ月前にDRILL LANCERが編集しました。

[kaneko]

RICK様

お忙しいところ、本当に何度もご丁寧に有難うございます。

はい、CSS部分等はインストール時からいじっていないので、確認しましたが、デモサイトと同様のように見受けられました。
試しに、該当の.svgファイル6つを.pngで作り直し、
以下２つのCSSの「.svg」を「.png」に変更したら、
.htaccessに「AddType image/svg+xml .svg」を記載せずとも、問題なく表示がでました。

（変更したCSS↓）
vk-mobile-nav-dark.css
vk-mobile-nav-bright.css

参考までに、サーバはNTT（スマイルサーバ）です。
「.svgの方が表示がキレイ」とありましたが、
.pngにするか、.htaccessでサーバ側の設定を変更するか・・・
一旦どちらかで対応しようかなと思っています。

皆様のお陰で、何とか問題が解決出来そうです。
すみません、長くなりましたが、
本当に色々とお時間を割いて頂き、有難うございました。

[maji1]

「スマホのハンバーガーメニューが、四角枠のみしか表示されていない」

状況の改善事例です

Lightning Pro　2.6.4

Lightning Header Color Manager　を停止

で、スマホのハンバーガーメニューが、表示されました

[やん子]

WP初心者です。
こちらで発言して良いものなのか分からないですが、、

私も同じく、スマホのハンバーガーメニュー、そしてメニュー展開後のサイドメニューを開く矢印の方も四角枠しか表示されず困っております。

デザインスキンはFort（footer light）を使用しております。

テーマ、プラグイン共に全て最新版に更新済み、プラグインを一つずつ無効にして試してみましたが変わらず、子テーマでCSS編集していますが全て消してみても変わらずです。

VK Mobile Navを使用し、ハンバーガーメニューをやめてみましたが、結局中のサイドメニューの矢印が表示されないので困っています。
kaneko様のように画像をpngファイルに書き換えないと解決できないのでしょうか。

もし他の解決方法がありましたらご教示いただきたいです。
よろしくお願いします。
ぶら下がり失礼いたしました。

[Vektor,Inc]

ハンバーガーメニューが表示されない原因は大きく３つあります。

* HeaderColorCustomizerなどで背景が濃くなる前提のものを使うとデフォルトのCSS指定でアイコンは白になるので、背景が白だとアイコンも白で表示されていないように見える
* サーバーがsvgファイルの表示を許可していない
* ブラウザとの相性

どのブラウザで確認しても表示されない状態でしょうか？
それとも特定のブラウザだけでしょうか？

• この返信は4年、 10ヶ月前にVektor,Incが編集しました。

[やん子]

ご返信誠にありがとうございます。

ブラウザはSafari（Mac & iPhone）、Chromeで確認していますがどちらでも表示されません。
HeaderColorCustomizerのようなプラグインも使用していないので、使用しているサーバーがsvgファイルの表示を許可していないのかもしれません。（サーバーはWebArenaです）

その場合、.htaccessファイルを書き換えるとのことですが、FTPで.htaccessファイルをダウンロードしてきて書き換えれば良いのでしょうか？？

初心者で分からないことばかりで・・
初歩的な質問でしたら申し訳ありません。

[投稿者]

投稿