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

[セングチタケシ]

■ WordPress のバージョン
6.1.1

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

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

■ テーマのバージョン
15.2.1

■ Pro Unit のバージョン
0.23.4

■ スキンの種類
Origin III

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

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

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

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

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

[うなこ]

この方法がヒントになるのではないかなと思います。

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

電話番号とお問い合わせ箇所を表示する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/

[石川＠Vektor,Inc.]

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

例

追従お問い合わせボタン

[投稿者]

投稿