HOME フォーラム Lightning ハンバーガーメニューを「メニュー」とカタカナ書きに変えたい

このトピックには13件の返信が含まれ、6人の参加者がいます。2 ヶ月、 1 週前 古河 さんが最後の更新を行いました。

14件の投稿を表示中 - 1 - 14件目 (全14件中)
  • 投稿者
    投稿
  • #9142

    GO
    参加者

    スマホなど画面が狭いところでは、グランド(ナビ)メニューが「三」のハンバーガーアイコンで表示されます。
    ところが、どうもこれがメニューボタンだ、と気付いてもらえないことが少なくないことが分かりました。

    「三」の代わりに「メニュー」とカタカナ書きにしたいのですが、これは下記のように 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 のここを強引に「メニュー」に変えてみたのですが、どうも上手く動きません。
    四角い枠の中に「メニュー」と表示されるのですが、それを選択してメニュー画面が表示されたとき、「×」ボタンに変わりません。

    あと、どこをいじったら良いのでしょうか。
    どなたかお分かりになる方、いらっしゃいますか?

    #9166
    なでこ
    なでこ
    モデレーター

    こんにちは!CSSから修正できそうです。

    VK ExUnit → CSSカスタマイズに以下のCSSを追加してみてください。
    (もしくは、外観→カスタマイズ→追加CSS)

    .fa-navicon:before, .fa-reorder:before, .fa-bars:before {
    content: “メニュー”;
    }

    #9177

    GO
    参加者

    なでこ様

    コメントをありがとうございました。
    残念ながら、教えて頂いた CSS カスタマイズでは修正できませんでした。
    念のため!importantも入れてみたのですが、ダメでした。

    基本的に php はいじっていないので、タグの名称その他は変わっていないはずなのですが。

    #9178
    なでこ
    なでこ
    モデレーター

    ダメでしたか… うーん…なぜでしょう…(+_+) cssを追加した後は、ナビメニューの「三」の文字はどうなりますか??

    #9179

    GO
    参加者

    全くなにも変わりませんでした。
    css の追加を記載したことが、なにも反映されていない挙動でした。

    #9180
    なでこ
    なでこ
    モデレーター

    あ、原因が分かりました。すみません…!
    以下のCSSを追加して下さい。

    .fa-navicon:before, .fa-reorder:before, .fa-bars:before {
    content: "メニュー";
    }

    原因は「メニュー」を囲うダブルクォーテーションマークが全角になっておりました。
    (codeで囲わないと、送信したときに全角に変換されてしまうんですね…無知でした汗)
    半角にしていただければ直ると思います。

    • この返信は11 ヶ月、 2 週間前に なでこ なでこ さんが編集しました。
    • この返信は11 ヶ月、 2 週間前に なでこ なでこ さんが編集しました。
    #9183

    GO
    参加者

    できました、できました!!
    ありがとうございます。感動的に修正されました。

    マウスを乗せたときのロールオーバーもきちんと反応しています。
    css の修正ではダメだと思っていました。

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

    #9992

    yuanmaroliunei
    参加者

    ここに書いて良いかわからないのですが、同じことをしたいので、ここに書いてみます。
    自分は
    WordPress 4.9.6
    バージョン: 4.4.3
    ハンバーガーメニューがそもそも三になっていません。
    上記CSSを書き加えても何も変化は見られません。
    ただの□(四角い箱)が表示されています。

    どなたか、よろしくお願いいたします。

    #10037

    yuanmaroliunei
    参加者

    追記:
    サイト内のほとんどの「Font Awesome」のアイコンが表示されません。
    管理画面内の「外観」の「カスタマイズ」で見るときちんと表示されていますが、通常の表示では表示されません。
    何か触ってはいけないことろを触ったのでしょうか?
    よろしくお願いいたします。

    #10059

    GO
    参加者

    「Font Awesome」が表示されないのは、Lightning の最新バージョンで改善されていると思います。
    書き込みを拝見して、僕もサイトのアイコンが消えていてびっくりしました。

    Lightning を最新版に更新してどうなるか、教えて頂けますか?

    #10108
    sumapan
    sumapan
    参加者

    お世話になっています。

    私もハンバーガーメニューをメニューの文字に変更したく、
    こちらのなでこ様記述のものを子テーマの追加CSSに書き込んだのですが、
    変わらず、なにか原因はありますでしょうか?

    WordPress 4.9.6
    Lightningバージョン: 4.4.12です。

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

    #10109
    sumapan
    sumapan
    参加者

    追記ですが、プラグインはlightning paleを使用しております。

    #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 の背景指定するだけの方が表示は安定すると思います。

    • この返信は4 ヶ月、 2 週間前に じょに次郎 じょに次郎 さんが編集しました。
    #10737

    古河
    参加者

    こんにちは。
    BizVektor ですが、上記を試しても、「メニュー」に変わりません。
    Lightning だけなのでしょうか?

14件の投稿を表示中 - 1 - 14件目 (全14件中)

このトピックに返信するにはログインが必要です。