fbpx
The Admin Bar

Create a Sticky Sidebar with GenerateBlocks

Feb 17, 2022

By: Kyle Van Deusen

Filed Under:

This page contains affiliate links in accordance with our affiliate policy.
☀ Read in Light Mode

In this video I do a quick walkthrough on how to create a sticky sidebar using GenerateBlocks. While it does take a couple lines of CSS (provided below), it's a simple process and once the CSS is added you can reuse the same selectors on other parts of your website.

Here's the code you will need from the video:

.sticky-container > .gb-inside-container {
	height: 100%;
}

.sticky-element {
	position: sticky;
	position: -webkit-sticky;
	top: 48px;
}

Step by Step Written Instructions

1. Open your page in the block editor

2. Click to add a new block

Click to add a new block

3. Click on Container

Click on Container

4. Click on Spacing

Click on Spacing

5. Add padding to your section

Add padding to your section

6. Click on Add block

Click on Add block

7. Add a Grid block

Add a Grid block

8. Choose a 2-column grid

Choose a 2-column grid

9. Select the first container in your grid

Select the first container in your grid

10. Change the width to 66%

Change the width to 66%

11. Select the 2nd container in your grid

Select the 2nd container in your grid

12. Change the width to 33%

Change the width to 33%

13. Select the grid block

Select the grid block

14. Add 60px of Horizontal Gap

Add 60px of Horizontal Gap

15. Fill your left container with content

You'll want to have enough content in here that it allows the user to scroll through this section. If there is no scrolling required to get through this section, then nothing will "stick".

Fill your left container with content

16. Click on List View

Click on List View

17. Click on the 2nd container in your grid

Click on the 2nd container in your grid

18. Click on Add block

Click on Add block

19. Add a container

This will house everything you want to "stick"

Add a container

20. Click on Colors (optional)

Click on Colors

21. Choose a background color for your container (optional)

Choose a background color for your container (optional)

22. Click on "Spacing"

Click on "Spacing"

23. Add padding to your container

If your design requires it, give your sticky container some padding.

Add padding to your container

24. Click on Add block

Click on Add block

25. Add a heading block inside your inner container

Add a heading block inside your inner container

26. Enter the text you want to add

Or add any other type of block you want to have inside your sticky sidebar. For demo purposes we're only going to add a heading.

Enter the text you want to add

27. Select the inner container

This is the container we added a background color to. The "sticky" container.

Select the inner container

28. Click on Advanced

Click on Advanced

29. Type "sticky-element" in the Additional CSS field

Type "sticky-element" in the Additional CSS field

30. Click on the outer container

This is the container that houses our "sticky" container, and will act as the track the sticky container stays within.

Click on the outer container

31. Click on Advanced

Click on Advanced

32. Type "sticky-container"

Type "sticky-container"

33. Click on Update

Click on Update

34. Click on View Page

Click on View Page

35. Click on Customize

Click on Customize

36. Click on Additional CSS…

Click on Additional CSS…

37. Click on CSS code

Click on CSS code

38. Paste selected text into text

.sticky-element {
	position: sticky;
	position: -webkit-sticky;
	top: 48px;
}

.sticky-container > .gb-inside-container {
	height: 100%;
}

The first line of CSS will set your inner container to be sticky, and the second line will make your outer container (the "track") the full height of your section.

Paste selected text into text

39. Click on Publish

Click on save

tab headshot ml
Kyle Van Deusen
@kylevandeusen

Kyle is the co-host of The Admin Bar, the owner of a agency of one called OGAL Web Design and the co-founder of Docket WP. You’ll likely find him trolling The Admin Bar community.

Enjoy this? Become an Official Barfly!

More from The Bulletin Board

Questions To Ask a Contractor Before Hiring Them

If you’re hiring a freelancer or contractor for your project, fit is everything. Get the right freelancer for the job with these thought-provoking questions.
Abby Wood
Apr 18, 2022

2022 WordPress Agency Survey

In March 2022, we put together an anonymous survey for all of our community members to ask them questions about...
Kyle Van Deusen
Apr 08, 2022

What do web agencies use for the H1 on their home page?

A few weeks back I was talking to one of my buddies in the group who was workshopping different ideas...
Kyle Van Deusen
Apr 01, 2022

Join Our Community

The Admin Bar Facebook group is at the heart of what we do. Join in on the daily conversation and get involved.
Join the Community
tab phone 4k member
© The Admin Bar (a Division of OGAL Web Design) — All Rights Reserved
crossmenu