「Lightning G3」で、最初に表示されたヘッダーメニューをx-t9のように画面をスクロールしてもそのまま固定して表示しておくことは出来ないのでしょうか？

このトピックには2件の返信、3人の参加者があり、最後に対馬俊彦により2日前に更新されました。

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

投稿者

投稿
2024年11月2日 2:12 PM #103350

joen1900
参加者

■ WordPress のバージョン
WordPress 6.6.2

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

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

■ テーマのバージョン
Lightningバージョン: 15.27.1

■ Pro Unit のバージョン
バージョン 0.28.0

■ スキンの種類
Origin III

■ 期待する動作
パソコンの画面で最初に表示されたヘッダーメニューが
x-t9のように画面をスクロールしてもそのまま固定して表示される
スマホは現在のままでいいです。

■ 自分で試した事
.site-header {
position: fixed;
top: 0;
width: 100%;
z-index: 999;
transition: background-color 0.3s ease; /* スクロール時の背景変化をスムーズにする */
}

.site-content {
margin-top: 60px; /* ヘッダーの高さに応じて調整 */
}
を試したが変わりませんでした。

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

■ 実際の症状
パソコンの画面で最初に表示されたヘッダーメニューが
スクロールしたらlogoだけ表示される

該当URL : https://*********
※該当URLはフォーラムライセンスが有効のユーザーにのみ表示されます

2024年11月2日 9:16 PM #103358

瀬戸内ことり
参加者
制作実績

こちらの記事をご覧になったことはありますか？

まだでしたら、ひととおりお読みになり、さまざまな設定の組み合わせをお試しください。

2024年11月4日 10:11 AM #103389
対馬俊彦
参加者
制作実績
横から失礼します。

> スマホは現在のままでいいです。

から推察すると、パソコンでもフローティングバナーを表示したいということでしょうか？

もしそうだとすると、スマホのフローティングバナーと同じ考え方でできると思います。

以下の CSS を試してみてください。
```
@media (min-width: 769px) {
  .floating-banner-container {
    display: flex;
    bottom: unset;
    top: 0;
    left: unset;
    right: 0;
    width: 50%;
  }
}
```
こんなことをしたいのかな、と思いました。違ってたらすいません…
投稿者

投稿