- このトピックには6件の返信、3人の参加者があり、最後に
により1年、 6ヶ月前に更新されました。
-
投稿
-
【お使いの Snow Monkey のバージョン】20.0.2
【お使いの Snow Monkey Blocks のバージョン】19.2.1
【お使いの Snow Monkey Editor のバージョン】9.2.1
【お使いのブラウザ】Chrome
【当該サイトのURL】### 実現したいこと
グローバルナビゲーションのホバー時の下線の長さや文字との余白を調整したい。
CSSの問題だと思いますので恐縮ですがよろしければご助言お願いいたします。
### 発生している問題
aタグを囲っている.c-navbar__item, .c-navbar__item:hoverもしくは.c-navbar__item:after要素のborderやbackgroundをnoneにしてみましたが反映されませんでした。
### 試したこと
こちらの記事を参考にafter要素を探してみたのですが見当たらず、提示していただいていたソースをそのままコピペしてみたのですがうまくいきませんでした。
Who liked: No user徳本さん
ざっくりと試してみたところでの回答で恐縮ですが、おそらくこの部分のpaddingを調整することで、意図するような感じにできるのではないかなと思います。
下記は、文字と線の余白を少し詰めて、横幅を少し広げた場合の例です。
.p-global-nav .c-navbar__item>a { padding: 10px 30px 5px 30px; }※1行表示の場合です。
メニューの位置も連動しますので、その点はご留意くださいませ。Who liked: No user徳本さん
なるほど！そういうことでしたか。いえいえ、こちらこそ読み取れず失礼しました。
それであれば下記のコードで全削除できると思うのですが、厳密なチェックはしていないのでご容赦くださいませ。
同じく1行表示の場合です。.l-1row-header .p-global-nav .c-navbar__item :after, :before { display: none; }当てたいスタイルまでは試せていませんが、参考になりましたら幸いです♪
Who liked:このにゅっと伸びるエフェクト、CSS 自体は書いてたから設定項目にも追加してあると思ったら無いですね…。
（↓Snow Monkey のベースになっている自作の CSS フレームワークには CSS がある）
これは Snow Monkey に入れる方向で検討します…！
Who liked:esさんありがとうございました！
希望通りの挙動になりました！！
違うレイアウトを使っているのに .l-1row-header と書いていて反応がないと焦ってしまいました。お恥ずかしい・・・助かりました！
キタジマさん
個人的にこのスタイルよく使うので、Snow Monkeyに入ったら捗りますー！！
ぜひともよろしくお願いいたしますm(_ _)m
Who liked:
- トピック「グローバルナビゲーションのホバー時の下線の余白、長さなどを調整したい。」には新しい返信をつけることはできません。