[ 解決済 ] スマホのバーガーメニューの四角エリアを消したい

[Yoshi]

LightningPro+Paleにてサイト作成中です。

スマホで表示して、バーガーメニューを開くと
最初に四角罫線のエリアが表示されます。

以前のこのフォーラムで

外観 > 追加CSS で

.vk-mobile-nav {
box-shadow:none;
}

で消える

とありましたので、実行しましたが
消えません。

他にこの四角罫線エリアを消す方法はありませんでしょうか？

よろしくお願いします。

[kurudrive]

下記でいけるかと思います。

.vk-mobile-nav-menu-btn { border:none; }

↓ このへん見ると細かい指定が出来るようになります。参考まで。

全てのWordPressテーマで使える！デザインをピンポイントで変更する方法 〜親テーマのCSSは書き換えないで〜

[Yoshi]

ご回答、あるがとうございます。

カスタマイズ＞＞追加CSSに加えてみましたが変わりませんでした。

.vk-mobile-nav-menu-btn { border:none; }

このままコピペしただけではだめなのでしょうか？

それともiOSではだめなのでしょうか？

お手数をおかけしますが、よろしくお願いします。

[kurudrive]

ハンバーガーメニューの枠線は先述のコードで消えるので、
すみません『最初に四角罫線のエリア』というのはもう少し詳しくどこの事を指していますか？

[Yoshi]

いま、Androidの端末で見たら消えていました。
というか、最初っから出ないようです。

最初に四角罫線のエリアっていうのは
バーガーメニューを押して現れる画面の上のエリア、
つまり、左上にXマークが出ますが、その下あたりに薄い四角罫線で囲まれたエリアがあって、
その下にメニューが表示されます

先ほど、追加のCSSの記述を消してみましたが、
Android端末ではこの「四角罫線」は出ません。

しかし、iPhoneやiPadでは出るようです。

[kurudrive]

外観 > カスタマイズ > ウィジェット > モバイルナビ上部 のあたりという事でしょうか？

もしかしたらデモサイトのバナーのウィジェットが設定されているけれど画像が無いとかそういう状態かもしれません。

[Yoshi]

これで見ていただけるでしょうか？
iPhoneで見た画面です。

https://drive.google.com/open?id=1Z2HDHSn5zjXDrNQq5OIuU0sHniznK1_1

[Yoshi]

当該サイトのURLを下記に示します。

ホーム

これをiPhoneかiPadでみてもらってバーガーメニューを押してもらうと先ほどのような画面になると思うのですが・・

[kurudrive]

外観 > カスタマイズ > ウィジェット > モバイルナビ上部 に設定されているウィジュエットが存在しない画像を読み込んでいるので削除してください。

[Yoshi]

ありがとうございます！
消えました。

こんなところにテキストボックスを置いていたんですね・・

お手数をおかけして、申し訳ございませんでした。
今後ともよろしくお願いします。

[投稿者]

投稿