ナビ下線を太くしたり、ナビ下余白を狭くしたい

0
いいねをした人: 居ません
4件の投稿を表示中 - 1 - 4件目 (全4件中)
  • 投稿者
    投稿
  • #84978
    アバター画像星乃 みなみ
    閲覧者
    36

    【お使いの Snow Monkey のバージョン】15.3.1
    【お使いの Snow Monkey Blocks のバージョン】12.0.1
    【お使いの Snow Monkey Editor のバージョン】6.0.0
    【お使いのブラウザ】Chrome
    【当該サイトのURL】http://x04.kglb.net/

    ### 実現したいこと

    スレッド2つに分けるべきか悩みましたが、小粒なのでいったんまとめます
    – ロゴした余白:これはできた
    – ヘッダ下余白(固定になってるところの下のほう):どこでちじめていいかわからない、いまの半分から1/3ぐらいにしたい
    – ナビ下罫線を太く:どれをいじっていいのかわからない

    ### 発生している問題

    ボーダーのパディング・マージンだとおもっていたら、フレックスボックスや、calcなどが入り組んでいて
    どれをいじれば、罫線が太くなるのか、余白が減らせるのかわからなくなっています

    CSSなら、ここを頼らず出来ると思ってたのに、とても悔しいです
    該当箇所いじったことがあるかた、教えていただけると助かります!

    ### 試したこと

    Chromeの開発機能をつかって当該部分のコードの数値を変えてみたりしたのですが変化がありません
    その後、いくつかのパラメーター追加CSSに書いてみましたが、同様に変化がありません

    
    /*ヘッタ*/
    
    /*ナビ 動作しない*/
    .p-global-nav .c-navbar__item>a {
    	line-height: 4.0 !important;
    }
    
    /* ロゴ下余白 */
    .l-1row-header__branding {
    	padding-bottom:20px;
    }
    
    /* コンテンツ余白:動作しない */
    . l-contents {
    	padding-top:5px;
    }
    
    0
    いいねをした人: 居ません
    #84983
    アバター画像星乃 みなみ
    閲覧者
    36

    頑張って格闘中です
    余白はほぼほぼ出来た感じ
    以外と、ナビ下部バーの構造がイマイチ把握できてないです
    泣きそう

    /*ヘッタ*/
    
    /*ナビ 動作しない*/
    .p-global-nav .c-navbar__item>a {
    	font-size: 16px;
    	font-weight: bold;
    }
    
    /* ロゴ余白 */
    .l-1row-header__branding {
    	padding-top:20px;
    	padding-bottom:20px;
    }
    
    /* コンテンツ余白 */
    .l-contents__inner:first-child {
    	padding-top:0px;
    }
    0
    いいねをした人: 居ません
    #84986
    GONSY
    参加者
    841

    小山智久さん
     
    ナビゲーションの下線は擬似要素になってます。
    デベロッパーツールでも確認できると思います。(下図参照)

    この部分の高さを大きくすれば太くなると思います。

    .p-global-nav--hover-underline .c-navbar__item > a:after {
    	/* デフォルトは1px */
    	height: 4px;
    }

    効かないようであれば!importantを。

    3
    いいねをした人:
    #84991
    アバター画像星乃 みなみ
    閲覧者
    36

    できました!  ありがとうございます!
    そっか 疑似要素だったんですね
    !important無くても大丈夫でした

    ほんと泣きそうでした。感謝します!
    もうこのコミュニティなければ生きていけない
    なんとかして還元出来る側になりたいです

    早速デザイナーに自慢します!

    余白もいけたのでトピック閉じますね
    ほんとありがとうございます。
    となりにいたらハグしてチューしてますねw

    1
    いいねをした人:
4件の投稿を表示中 - 1 - 4件目 (全4件中)
  • トピック「ナビ下線を太くしたり、ナビ下余白を狭くしたい」には新しい返信をつけることはできません。

ドキュメント

Snow Monkey の設定方法やマニュアルを掲載しています。

ドキュメント

フォーラム

Snow Monkey の使い方やカスタマイズについてのご質問・ご要望等はサポートフォーラムで行っています。サポートフォーラムは誰でも閲覧できますが、書き込みできるのは Snow Monkey 購入者のみとなります。

サポートフォーラム

よくあるご質問

Snow Monkey のサービスについて不明な点がある場合は、まずはよくあるご質問をご確認ください。

よくあるご質問

お問い合わせ

よくあるご質問を見ても解決しなかった場合、試用版の申請については問い合わせフォームからお願いいたします。

お問い合わせ

Snow Monkey は Gutenberg ブロックエディターに対応した 100%GPL の WordPress テーマです。拡張性を意識した開発をおこなっており、カスタマイザーとブロックでスピーディーにサイトを立ち上げるだけでなく、CSS やフックを駆使した高度なカスタマイズにも柔軟に対応できます。