[徳本 奈穂子]

【お使いの 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にしてみましたが反映されませんでした。

### 試したこと

メニューの下線の太さと色を変えたい

このトピックには2件の返信、2人の参加者があり、最後に宮崎敬介により1年、 10ヶ月前に更新されました。 3件…

snow-monkey.2inc.org

こちらの記事を参考にafter要素を探してみたのですが見当たらず、提示していただいていたソースをそのままコピペしてみたのですがうまくいきませんでした。

♥ 0

いいねをした人: 居ません

[es：エス]

徳本さん

ざっくりと試してみたところでの回答で恐縮ですが、おそらくこの部分のpaddingを調整することで、意図するような感じにできるのではないかなと思います。

下記は、文字と線の余白を少し詰めて、横幅を少し広げた場合の例です。

.p-global-nav .c-navbar__item>a {
 padding: 10px 30px 5px 30px;
}

※1行表示の場合です。
メニューの位置も連動しますので、その点はご留意くださいませ。

♥ 0

いいねをした人: 居ません

[徳本 奈穂子]

esさん！！ありがとうございます。

後出しで申し訳ないのですが、このようなこと↓を実装したいと考えています。

中心から外に線が伸びる（下部） | 動くWebデザインアイディア帳

coco-factory.jp

ですので、できれば

.p-global-nav .c-navbar__itemのスタイルを全削除→該当のaタグにサンプルのスタイルを当てるということがしたいのです。。。

最初から言えば良かったです、申し訳ありません。

♥ 0

いいねをした人: 居ません

[es：エス]

徳本さん

なるほど！そういうことでしたか。いえいえ、こちらこそ読み取れず失礼しました。

それであれば下記のコードで全削除できると思うのですが、厳密なチェックはしていないのでご容赦くださいませ。
同じく1行表示の場合です。

.l-1row-header .p-global-nav .c-navbar__item :after, :before {
  display: none;
}

当てたいスタイルまでは試せていませんが、参考になりましたら幸いです♪

♥ 1

いいねをした人:

[キタジマ タカシ]

このにゅっと伸びるエフェクト、CSS 自体は書いてたから設定項目にも追加してあると思ったら無いですね…。

　（↓Snow Monkey のベースになっている自作の CSS フレームワークには CSS がある）

Basis Styleguide

sass-basis.github.io

これは Snow Monkey に入れる方向で検討します…！

♥ 2

いいねをした人:

[徳本 奈穂子]

esさんありがとうございました！

希望通りの挙動になりました！！

違うレイアウトを使っているのに .l-1row-header と書いていて反応がないと焦ってしまいました。お恥ずかしい・・・助かりました！

 

キタジマさん

個人的にこのスタイルよく使うので、Snow Monkeyに入ったら捗りますー！！

ぜひともよろしくお願いいたしますm(_ _)m

♥ 2

いいねをした人:

[キタジマ タカシ]

Snow Monkey v20.1.0 で、「伸びる下線」という名前で追加しました！

♥ 2

いいねをした人:

[投稿者]

投稿