[ 解決済 ] カレントページのヘッダメニューのアンダーラインを消す

[Gmove]

■ WordPress のバージョン
WordPress 6.1.1

■ テーマ・プラグインは全て最新版で確認してください。
確認しました。

■ テーマの種類
Lightning ( G3 ) + Lightning G3 Pro Unit

■ テーマのバージョン
15.3.0

■ Pro Unit のバージョン
0.23.4

■ スキンの種類
Origin III

■ 関連しそうなプラグインを一つづつ停止して症状が改善するか確認してください。
確認しました。

■ 期待する動作
ヘッダメニューに複数のアンカーリンク（お知らせのアーカイブなどから
リンクを機能させるため、#〇〇ではなく/hoge/#〇〇にしている）を設定しています。

アンカーリンクを設定したページを訪れると、同ページ内のアンカーリンクを
設定したヘッダメニューの全てにアンダーラインが付いた状態になってしまうので、
任意の項目だけアンダーラインが表示されず、マウスオーバーした際には
通常通りアニメーションのアンダーラインが表示されるようにしたい。

■ 自分で試した事
指定メニューのアンダーラインを消す

@media (min-width: 768px){
.global-nav-list > li#menu-item-4202:after{
border-bottom:none !important;
}
}

→これだと指定のメニューからアンダーラインを消すことは出来ますが、
マウスオーバーした時のアンダーラインも表示されなくなります

■ 症状が発生するブラウザ
Google chrome

■ 実際の症状
アンカーリンクを設定したページを訪れると、同ページ内のアンカーリンクを
設定したヘッダメニューの全てにアンダーラインが付いた状態になってしまう

[DRILL LANCER]

こんな感じでどうでしょうか？

.global-nav-list>li[class*=current]:before {
    width: 0;
}
.global-nav-list>li:hover:before {
	width: 100%;
}

CSS の記載位置によって上記 CSS が負けることがあります。
その場合は場合は工夫してみてください。

[Gmove]

ありがとうございます。
頂いたソースをいじってイメージ通りに変更できました。

• この返信は1年、 10ヶ月前にGmoveが編集しました。

[投稿者]

投稿