このトピックには13件の返信が含まれ、6人の参加者がいます。2 年、 6 ヶ月前に 古河 さんが最後の更新を行いました。
-
投稿者投稿
-
2017.12.21 5:12 PM #9142
スマホなど画面が狭いところでは、グランド(ナビ)メニューが「三」のハンバーガーアイコンで表示されます。
ところが、どうもこれがメニューボタンだ、と気付いてもらえないことが少なくないことが分かりました。「三」の代わりに「メニュー」とカタカナ書きにしたいのですが、これは下記のように Font Awesome Icon を使っているようです。
<a id="menuBtn" class="btn btn-default menuBtn menuClose menuBtn_left" href="#"><i class="fa fa-bars" aria-hidden="true"></i></a>
header.php のここを強引に「メニュー」に変えてみたのですが、どうも上手く動きません。
四角い枠の中に「メニュー」と表示されるのですが、それを選択してメニュー画面が表示されたとき、「×」ボタンに変わりません。あと、どこをいじったら良いのでしょうか。
どなたかお分かりになる方、いらっしゃいますか?2017.12.28 3:11 PM #9166こんにちは!CSSから修正できそうです。
VK ExUnit → CSSカスタマイズに以下のCSSを追加してみてください。
(もしくは、外観→カスタマイズ→追加CSS).fa-navicon:before, .fa-reorder:before, .fa-bars:before {
content: “メニュー”;
}2018.01.02 2:29 PM #9177なでこ様
コメントをありがとうございました。
残念ながら、教えて頂いた CSS カスタマイズでは修正できませんでした。
念のため!important
も入れてみたのですが、ダメでした。基本的に php はいじっていないので、タグの名称その他は変わっていないはずなのですが。
2018.01.04 10:59 AM #9178ダメでしたか… うーん…なぜでしょう…(+_+) cssを追加した後は、ナビメニューの「三」の文字はどうなりますか??
2018.01.04 11:15 AM #9179全くなにも変わりませんでした。
css の追加を記載したことが、なにも反映されていない挙動でした。2018.01.04 11:36 AM #91802018.01.04 12:01 PM #9183できました、できました!!
ありがとうございます。感動的に修正されました。マウスを乗せたときのロールオーバーもきちんと反応しています。
css の修正ではダメだと思っていました。本当にありがとうございました。
2018.05.29 2:35 PM #9992ここに書いて良いかわからないのですが、同じことをしたいので、ここに書いてみます。
自分は
WordPress 4.9.6
バージョン: 4.4.3
ハンバーガーメニューがそもそも三になっていません。
上記CSSを書き加えても何も変化は見られません。
ただの□(四角い箱)が表示されています。どなたか、よろしくお願いいたします。
2018.05.31 11:31 AM #10037追記:
サイト内のほとんどの「Font Awesome」のアイコンが表示されません。
管理画面内の「外観」の「カスタマイズ」で見るときちんと表示されていますが、通常の表示では表示されません。
何か触ってはいけないことろを触ったのでしょうか?
よろしくお願いいたします。2018.06.04 1:53 PM #10059「Font Awesome」が表示されないのは、Lightning の最新バージョンで改善されていると思います。
書き込みを拝見して、僕もサイトのアイコンが消えていてびっくりしました。Lightning を最新版に更新してどうなるか、教えて頂けますか?
2018.06.18 7:19 PM #10108お世話になっています。
私もハンバーガーメニューをメニューの文字に変更したく、
こちらのなでこ様記述のものを子テーマの追加CSSに書き込んだのですが、
変わらず、なにか原因はありますでしょうか?WordPress 4.9.6
Lightningバージョン: 4.4.12です。よろしくお願いいたします。
2018.06.18 7:22 PM #10109追記ですが、プラグインはlightning paleを使用しております。
2018.08.06 12:04 PM #10437.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の文字の入った画像(SVG推奨)を作って
.vk-mobile-nav-menu-btn と .vk-mobile-nav-menu-btn.menu-open の背景指定するだけの方が表示は安定すると思います。-
この返信は2 年、 8 ヶ月前に
じょに次郎 さんが編集しました。
2018.10.06 2:16 PM #10737こんにちは。
BizVektor ですが、上記を試しても、「メニュー」に変わりません。
Lightning だけなのでしょうか? -
この返信は2 年、 8 ヶ月前に
-
投稿者投稿
このトピックに返信するにはログインが必要です。