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

VWSとは フォーラム Lightning [ 解決済 ] カレントページのヘッダメニューのアンダーラインを消す

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

  • このトピックには2件の返信、2人の参加者があり、最後にGmoveにより1年、 1ヶ月前に更新されました。
3件の投稿を表示中 - 1 - 3件目 (全3件中)
  • 投稿者
    投稿
  • #72855

    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

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

    #72857

    DRILL LANCER
    モデレーター

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

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

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

    #72858

    Gmove
    参加者

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

    • この返信は1年、 1ヶ月前にGmoveが編集しました。
3件の投稿を表示中 - 1 - 3件目 (全3件中)
  • このトピックに返信するにはログインが必要です。