[Okabayashi]

【お使いの Snow Monkey のバージョン】バージョン: 20.0.1
【お使いの Snow Monkey Blocks のバージョン】バージョン 19.1.0
【お使いの Snow Monkey Editor のバージョン】バージョン 9.2.1
【お使いのブラウザ】safari
【当該サイトのURL】

### 実現したいこと

固定ページにて追尾サイドバーを使用していますが（左サイドバーレイアウト）、ウィンドウ幅がタブレットサイズ（正確には約1025px）以下になると追尾しなくなってしまいます。
タブレットサイズでも追尾させたいのですがどうしたらよろしいでしょうか。

また、ページをスクロールしていない状態でのサイドバーの位置を大体50pxほど下にずらしたいとも考えています。

### 発生している問題

タブレットサイズになるとサイドバーが追尾しない

### 試したこと

自分なりに色々と検索し調べてみたり、カスタマイズの設定も色々といじってみましたが解決法が見つからなかったので質問させて頂きました。

全くの素人で申し訳ありませんが、皆様どうぞよろしくお願いいたします。

♥ 0

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

[キタジマ タカシ]

下記のページは追尾サイドバーを使っていますが、1025px だと1カラムになるので、1025px でも2カラムになるように何らかのカスタマイズをされていますかね？

Snow Monkey でこれまでにおこなった Gutenberg 対応についてまとめてみた

この記事は Snow Monkey アドベントカレンダー 2018 4日目の記事です。 テーマサポー…

snow-monkey.2inc.org

♥ 0

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

[Okabayashi]

キタジマさま、ご返信ありがとうございます。

お世話になっております。

 

項目ブロックの設定で、ミディアムウィンドウで２カラムの設定にしています。

できればこのまま２カラムのままでサイドバーも表示したいと思っています。

当該ページのURL貼っておきます。

Works

Works Standard chair quiet chair spoke chair new mii ch…

hyakka-furniture.com

どうぞよろしくお願い致します。

♥ 1

いいねをした人:

[キタジマ タカシ]

原因わかりました！

追尾サイドバーは 1024px 以上のときにだけ固定（position: sticky）になるような CSS を書いているのでした。v19 でサイドバーありのページが2カラムになる条件が変わっているので本来はここも調整する必要があったのですが未調整となってしまっていました。

ひとまず暫定的な処置として、

@media (min-width: 707px) {
    .l-sidebar-sticky-widget-area {
		position: sticky;
		top: 0;
        background-color: red;
	}

    .l-contents {
        overflow: visible;
    }
}

のような CSS を追加すると追尾するようになるのではないかと思います。

♥ 1

いいねをした人:

[Okabayashi]

ご対応ありがとうございます。
追加CSSに貼ってうまく追尾するようになりました！

ちなみに最初の質問に載せていた

＞ページをスクロールしていない状態でのサイドバーの位置を大体50pxほど下にずらしたいとも考えています。

に関しても対処法ありましたらご教授お願い致します。

ひとまず追尾の件、誠にありがとうございます。

♥ 0

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

[キタジマ タカシ]

ページをスクロールしていない状態でのサイドバーの位置を大体50pxほど下にずらしたいとも考えています。

padding を使うのが簡単ですかね。

@media (min-width: 707px) {
  .l-sidebar-sticky-widget-area {
    padding-top: 50px;
  }
}

♥ 1

いいねをした人:

[Okabayashi]

キタジマ様

うまくいきました！

何から何までありがとうございました。
大変助かりました。
今後ともどうぞよろしくお願い致します！

トピックを閉じさせて頂きます。

♥ 0

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

[投稿者]

投稿