VWSとは フォーラム Lightning [ 解決済 ] LightningFortのグローバルメニューをカレント表示させたい

このトピックには4件の返信が含まれ、2人の参加者がいます。2 週間、 4 日前 tenten さんが最後の更新を行いました。

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

    tenten
    参加者

    Lightning Proバージョン: 0.4.0
    Lightning Skin Fort
    WordPress 4.9.8

    他のスキンのようなグローバルメニューにしたいです。
    (マウスを重ねたら色変更と下線が出て、選択ページは下線表示)
    もうひとつのフォーラムから調べて下記CSSを入れましたが変わりません。

    ul.gMenu > li.current-menu-ancestor > a,
    ul.gMenu > li.current-menu-item > a,
    ul.gMenu > li.current-menu-parent > a,
    ul.gMenu > li.current-post-ancestor > a,
    ul.gMenu > li.current_page_ancestor > a,
    ul.gMenu > li.current_page_parent > a,
    ul.gMenu > li > a:hover:after {
    color: #f007300;
    }

    よろしくおねがいします。

    #13758

    kurudrive
    参加者

    PC版のみに指定する場合は

    @media (min-width: 992px){
    ul.gMenu > li.current-menu-ancestor > a,
    ul.gMenu > li.current-menu-item > a,
    ul.gMenu > li.current-menu-parent > a,
    ul.gMenu > li.current-post-ancestor > a,
    ul.gMenu > li.current_page_ancestor > a,
    ul.gMenu > li.current_page_parent > a,
    ul.gMenu > li > a:hover:after {
    color: #007300;
    }
    }

    のように画面サイズ指定をしますが、今回の原因はそこではありません。

    color: #f007300; ← 色コードが間違ってます(文字数が多い)。

    #ff0000 のように 16進数の6桁か
    #f00 のように16進数の3桁 で指定してください。

    #13761

    tenten
    参加者

    すいません、色コード修正し下記CSS追記しましたが、IE11でアクティブページのみ色変更になる状態です。
    IEの時にオンマウスで色変更・下線表示、アクティブページで下線表示が出ません。
    choromeだと何も変わりません。

    @media (min-width: 992px){
    ul.gMenu > li.current-menu-ancestor > a,
    ul.gMenu > li.current-menu-item > a,
    ul.gMenu > li.current-menu-parent > a,
    ul.gMenu > li.current-post-ancestor > a,
    ul.gMenu > li.current_page_ancestor > a,
    ul.gMenu > li.current_page_parent > a,
    ul.gMenu > li > a:hover:after {
    color: #007300;
    }
    }

    #13765

    kurudrive
    参加者

    after要素が邪魔でした。
    下記でいけると思います。

    @media (min-width: 992px){
    ul.gMenu > li.current-menu-ancestor > a,
    ul.gMenu > li.current-menu-item > a,
    ul.gMenu > li.current-menu-parent > a,
    ul.gMenu > li.current-post-ancestor > a,
    ul.gMenu > li.current_page_ancestor > a,
    ul.gMenu > li.current_page_parent > a,
    ul.gMenu > li > a:hover {
    color: #007300; /* 文字の色 */
    position:relative;
    }
    ul.gMenu>li.current-menu-ancestor>a:after, ul.gMenu>li.current-menu-item>a:after, ul.gMenu>li.current-menu-parent>a:after, ul.gMenu>li.current-post-ancestor>a:after, ul.gMenu>li.current_page_ancestor>a:after, ul.gMenu>li.current_page_parent>a:after, ul.gMenu>li>a:hover:after {
        content: ".";
        line-height: 0;
        border-bottom: 1px solid #337ab7; /* 線の色はお好みで変更してください。 */
        bottom: 0;
        display: block;
        overflow: hidden;
        position: absolute;
        width: 100%;
        left: 0;
    }
    }
    

    全てのWordPressテーマで使える!デザインをピンポイントで変更する方法 〜親テーマのCSSは書き換えないで〜

    #13778

    tenten
    参加者

    ありがとうございました。
    いろいろ試した結果、下線表示はやめにしましたが
    思い通りになりました。

    実は会社にWEB解析士なる営業が来て
    いろいろと指摘された次第です。
    サイトはほぼデフォルトのままでしたので
    指摘事項を提案として「バグ報告と提案」に新トピさせていただきます。

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

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