Create a Sticky Sidebar with GenerateBlocks (Quick & Easy Tutorial w/ provided code)

No video

Create a Sticky Sidebar with GenerateBlocks (Quick & Easy Tutorial w/ provided code)

Рет қаралды 3,703

Күн бұрын

In this video I will walk you through the simple solution to creating a sticky sidebar using GenerateBlocks.
Get the CSS from this video:
theadminbar.co...
Watch the Build it With Blocks video: • Real-Time Website Buil...
---
Join our Facebook community (voted best WordPress community!): theadminbar.co...
Visit our website: theadminbar.com/

Пікірлер: 20

@danielschutzsmith9399 Ай бұрын

Thank you for this! Just getting into GP and GB.

@Web-Design-Technik Жыл бұрын

Hello again! With a bit of thinking I could solve the "problem" with the new GenerateBlocks blocks (from 1.7.0/Pro 1.5.0 => without inner block) myself in the meantime. I simply added a manual "sticky-inside-container" (instead of "gb-inside-container" - rename accordingly in CSS if necessary). I gave the outer container ("sticky-container") and the inner container ("sticky-inside-container") a height of 100% (in the GenerateBlocks settings). But you can also do that in the CSS (for both blocks mentioned before). Both are possible. Now the sticky sidebar works also with the new GenerateBlocks blocks. :-) Thanks again for the great video and explanations!

@thisweblabvideos 2 жыл бұрын

Nice, exactly what I need for a site I am making at the moment. Thanks

@TheAdminBar 2 жыл бұрын

Wahoo! Glad it's helpful!

@thisweblabvideos 2 жыл бұрын

@@TheAdminBar one detail though, its the same effect but it would be a more flexboxy way, would be to apply align-items: stretch; to grid block parent element. This would ensure all sub-containers are the same height as the tallest one. Effect would be same ... just ... more flexboxy

@Web-Design-Technik Жыл бұрын

Hi! I was very happy to see this great tutorial and I can use this sticky sidebar very well. But now I unfortunately have the problem that the container ".gb-inside-container" no longer exists under GenerateBlocks 1.7.0 / GenerateBlocks Pro 1.5.0? At least I think so... How to work around the problem? I would be very grateful for a tip.

@ahmederfancp1006 Жыл бұрын

Great video. Can you please help me to make a sticky top bar on the scroll? I need this feature for mobile and desktop

@sandra_runners-dog 2 жыл бұрын

Hello and thank you for the really helpful video. Unfortunately there is only one problem and that is that the table of contents on mobile devices is placed at the bottom of the post. how can I prevent this? is there a way to show an additional table of contents for mobile devices below the post image, which is only visible for mobile devices?

@storkraft Жыл бұрын

Hi thank you for the video. I ve followed all steps in video but the sidebar is not sticking. Any idea what might be the issue? Thanks!

@TheAdminBar Жыл бұрын

Humm, without digging in, it's hard to say!

@xtine_ferguson 2 жыл бұрын

Do you typically use px for your padding and margins? If so, why do you prefer px over em or %?

@TheAdminBar 2 жыл бұрын

I do have a bad habit of using PX, and should really be using EMs more often 😬.

@borissmolyanov4474 Жыл бұрын

Hi! How do we make this work under the new container system of GenerateBlocks 1.7.0? It no longer works with this CSS code… Thanks!

@enriquecruzpuente9239 11 ай бұрын

Place this CSS code: .sticky-container { posición: sticky; posición: -webkit-sticky; top: 10px z-index: 100; } .sticky-element { altura: 100%; }

@aattiar 10 ай бұрын

And for our english community: .sticky-container { position: sticky; position: -webkit-sticky; top: 10px; z-index: 100; } .sticky-element { height: 100%; }

@arieshben Жыл бұрын

what about tablet and mobile view?

@TheAdminBar Жыл бұрын

Typically they will stack and then have no more room to "stick", so you don't have to do anything.

@SherissaR 11 ай бұрын

Is it possible to make it sticky at the top once it has stacked on mobile? I tried adjusting the top value with a media query, but it doesn't stick on mobile.@@TheAdminBar