グローバルナビの「∨」マークを非表示にする方法【Cocoon】

グローバルナビで副項目の存在を知らせるこのマークですが、スマホで見た際にメニュー名に重なって表示されていました。

もしかすると私だけの症状かも知れませんが、どうやって非表示にすればよいのか・・・。ネットで調べてみても関連する情報が見当たりませんでした。

この極めてニーズの低そうな問題の解決策を考えてみましたので、直接的でも間接的にでも何かの参考になれば幸いです。

「∨」の名称はアングルダウン

矢印というワードに違和感がありますよね。正式名称は・・・記号系はだいたいFont Awesomeのはずなので、Font Awesomeのサイトから該当の記号を探してみました。アングルダウン。

非表示にする3つの方法

他にもやり方はあると思いますが、様々な環境を考えて3つの方法を紹介します。

グローバルナビ上で非表示

.navi-in .has-icon {
  display:none;
}

これが1番オーソドックスな方法です。上記CSSコードの追加または子テーマの編集のみ。

サイト全体で非表示

.fa-angle-down:before {
  display:none;
}

サイト全体からアングルダウンが非表示になります。最初にたどり着いた答えが上記コード。あまりニーズは無いと思いますが、何かのヒントになればと思って載せました。

サイトの背景色とアングルダウンのフォントカラーを同一にするという限定的な策もあります。

副項目を削除する

アングルダウンが表示されるのは副項目のあるメニューだけなので、グローバルナビから副項目を削除してしまえば表示されません。どうにもならない場合の最終手段としはアリだと思います。