HOME フォーラム Lightning メニューの下線を消す方法

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

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

    bravo444
    参加者

    お世話になっております。 Lightningの右上にある、「メニュー」では、デフォルトで下線が表示されています。
    また、マウスをホバーすると下線がでるのですが、両方ともに消したいのですが、うまくいきません。

    Style.cssには、.gMenu_outer { text-decoration: none; }としていますが、NGです。
    恐らくですが、text-decorationではなく、たのものになると思うのですが、わからない状況です。

    どなたかお分かりでしたらご教示頂けると助かります。

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

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

    こんにちは。メニューの線はafter要素で線を付けているので、以下のCSSを追加すると下線は消えると思います。

    @media (min-width: 992px){
    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:none;
    }
    }
    #9517

    bravo444
    参加者

    なでこ様

    ご教示頂き有難うございました! 完璧に下線は消えました。
    本当に有難うございます。 すみません、最後に一つ質問をさせてください。 別スレッドが必要でしたら、新たに立て直します。 メニューに縦線を表示しているのですが、縦線の長さを短く調整したいと思います。 なかなかうまくいかないのですが、もし何かおわかりでしたらご教示頂けると幸いです。

    以上、よろしくお願い致します。

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

    メニューの縦線、実際のサイトを見てみないとアドバイスしずらいのですが、おそらくliタグかaタグにborderプロパティでつけてますよね?
    そうだとすると、borderプロパティは要素の幅に応じて長さが決まるので、長さを指定することは難しいかもしれません><

    もしやるなら…liタグかaタグにborderをつけるのではなく、中のテキストのclassにborderをつけるとか?

    もしくは、liかaタグの背景画像にボーダー風の画像を入れて表示するのはいかがでしょうか?

    #9524

    bravo444
    参加者

    なでこ様

    早速のご連絡有難うございます。 すみません、URLは、下記の通りとなります。

    https://taki.photo-life.net 

    右上にあるメニューに縦線を入れています。 style.cssには下記のように記述しています。

    .gMenu_outer li {

    border-left: 1px solid #333;
    border-right: 1px solid #333;
    }

    大変お手数ですが、もう少々詳しくご教示頂けると助かります。

    何卒宜しくお願い致します。

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

    いろいろやり方はあると思いますが、以下の方法でborderを短くできます。
    (リンクのaタグのpaddingを無しにしてます)
    ほんの一例ですので、ほかにいい方法があればそちらでやってみてくださいー

    @media (min-width: 992px){
    ul.gMenu>li .gMenu_name {
        border-left: 1px solid #333;
        padding: 0 15px;
    }
    ul.gMenu>li:last-child .gMenu_name {
        border-right: 1px solid #333;
    }
    ul.gMenu>li>a {
        padding: 0;
    }
    }
    #9533

    bravo444
    参加者

    なでこ様

    色々と有難うございました。 ご教示頂いた方法ですべてうまくいきました。

    有難うございます。

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

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