会員サイトをリニューアルしました! 新サイトはこちら

ヘッダーナビの下線 < SWELLに関する質問

フォーラムをリニューアルしました!
今後は、新フォーラムをご利用ください。

ヘッダーナビの下線
 
通知
すべてクリア

ヘッダーナビの下線

8 投稿
2 ユーザー
1 Likes
1,582 表示
inkyo
(@inkyo)
New Member
Topic starter
 

ヘッダーナビの項目にカーソルを置いたときに出てくる下線を消すことができますでしょうか?

 
投稿済 : 19/09/2020 11:23 am
しらこ
(@96ssbike)
Prominent Member
 

こんにちは…!CSSのカスタマイズで消せます…!

にゃーん .

 
投稿済 : 20/09/2020 7:55 am
inkyo
(@inkyo)
New Member
Topic starter
 

返信ありがとうございます。

残念ながらブログ初心者でCSSのカスタマイズというのがよくわかりません。
ご指導いただければ幸いです。

inkyo

 
投稿済 : 20/09/2020 11:25 am
しらこ
(@96ssbike)
Prominent Member
 

すみません、失礼しました。CSSじゃなくてもできました。訂正します。

SWELLの設定項目にありました。

カスタマイザー>ヘッダー内のグローバルナビ(PC用表示)のプルダウンメニューをご確認ください。

添付の場所から何パターンか選んで設定可能です。

にゃーん .

 
投稿済 : 20/09/2020 2:37 pm
しらこ
(@96ssbike)
Prominent Member
 

ちなみに、上記以外のパターンのデザインにする場合には、やはりご自身でCSSにてカスタマイズしてください。

利用規約にもありますが、CSSのカスタマイズは公式でも無料サポート範囲外となっています。
ご一読いただければ幸いです。
https://swell-theme.com/terms/

にゃーん .

 
投稿済 : 20/09/2020 3:33 pm
inkyo
(@inkyo)
New Member
Topic starter
 

早速のご指導、大変ありがとうございました。 見つかりました!
ただ私の場合、背景画像の上にヘッダーメニューがありますので下線そのものを表示しないように
設定する必要があるんだと思います。 やはりCSSの勉強から始めようと思いました。

inkyo

 
投稿済 : 20/09/2020 9:30 pm
しらこ
(@96ssbike)
Prominent Member
 

ひとまず、時間が少し出来たので、こちらでCSSが用意したので、参考までに貼り付けておきます。

(最初、間違えた案内をしたお詫びも兼ねまして)

.c-gnav > li:hover > a::after,.c-gnav > .-current > a::after {
transform: scaleX(0);
}

これを、カスタマイザー>追加CSSに貼り付けてみてください。

前提条件:グローバルナビのマウスホバーエフェクトがラインの出現(中央から)の場合に使用できます。

このように設定していきます。

※SWELL本体側のバージョンアップに伴いCSSルールの変更があった場合、CSSを変更しないといけない場合がありますのでご了承ください。

にゃーん .

 
投稿済 : 21/09/2020 8:34 am
inkyo
(@inkyo)
New Member
Topic starter
 

これは凄い! うまく消えました。 感謝です。
次のCSSルール変更までの間に自分でできるよう頑張ってみます。

ありがとうございました。

inkyo

 
投稿済 : 21/09/2020 11:46 am
しらこ reacted
共有: