[ 質問者返信待ち ] ヘッダーコンタクトあり & ナビ貫通をスクロール時においても適用したいです

タグ: ヘッダー

このトピックには2件の返信、3人の参加者があり、最後に石川＠Vektor,Inc.により2ヶ月、 2週前に更新されました。

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

投稿者

投稿
2022年12月14日 2:48 PM #72068

セングチタケシ
参加者

■ WordPress のバージョン
6.1.1

■ テーマ・プラグインは全て最新版で確認してください。
確認しました。

■ テーマの種類
Lightning ( G3 ) + Lightning G3 Pro Unit

■ テーマのバージョン
15.2.1

■ Pro Unit のバージョン
0.23.4

■ スキンの種類
Origin III

■ 関連しそうなプラグインを一つづつ停止して症状が改善するか確認してください。
確認しました。

■ 期待する動作
ヘッダーレイアウトとして設定している「ヘッダーコンタクトあり＆ナビ貫通」のヘッダーデザインをスクロール時においても適用させたいと考えております。良い方法はありますでしょうか？

■ 自分で試した事
電話番号とお問い合わせボタンを含むコンタクトのコンテンツを表示させるため、画面右端に追尾するコンテンツをCSSで設置するなどの代替案は模索してますが、なかなか良い状況になりませんでした。
一番、実現させたい内容をフォーラムにおられる方々に知恵を貸してもらえたらうれしいです。

■ 症状が発生するブラウザ
Google chrome

■ 実際の症状
現状は、「固定ナビコンテンツ幅」を選択しているため、そちらが適用されて表示されます。

2022年12月15日 12:21 PM #72082
うなこ
モデレーター
この方法がヒントになるのではないかなと思います。

ヘッダー上部のお問い合わせボタンをスクロール時に画面の右端に表示

電話番号とお問い合わせ箇所を表示するCSSはこちらになります。
が、少々邪魔ではないかなと思いますので、対馬様の記事のようにコンタクトボタンだけ表示するのはいかがでしょうか？
```
/*header-sub部分をスクロール時表示*/
@media (min-width: 1200px){
.header_scrolled .site-header .site-header-sub{
	position:fixed;
	top:20%;
	right:10px;
	display:block;
	background: rgba(255,255,255,0.8);
	padding: 15px;
	border-radius:5px;
}

.header_scrolled .site-header-sub .contact-btn{
	padding-left:0;
}
.header_scrolled .site-header-sub .contact-btn a{
	padding:10px;
	justify-content: center;
}
} 
```
CSSのカスタマイズに関しましては、こちらがわかりやすいと思います。
https://training.vektor-inc.co.jp/courses/wordpress-customize/lessons/css-customize/
- この返信は1年、 11ヶ月前にうなこが編集しました。
- この返信は1年、 11ヶ月前にうなこが編集しました。
2024年9月7日 9:44 PM #100664

石川＠Vektor,Inc.
キーマスター
制作実績

VK Blocks Pro の固定表示ブロックで出来るようになりました。

例

追従お問い合わせボタン
投稿者

投稿