{"id":16990,"date":"2022-02-17T08:39:00","date_gmt":"2022-02-17T14:39:00","guid":{"rendered":"https:\/\/theadminbar.com\/?p=16930"},"modified":"2022-06-13T07:23:24","modified_gmt":"2022-06-13T12:23:24","slug":"create-a-sticky-sidebar-with-generateblocks","status":"publish","type":"post","link":"https:\/\/theadminbar.com\/create-a-sticky-sidebar-with-generateblocks\/","title":{"rendered":"Create a Sticky Sidebar with GenerateBlocks"},"content":{"rendered":"<!--presto-player:video_id=118--><figure class=\"wp-block-video presto-block-video  presto-provider-youtube\" style=\"--plyr-color-main: var(--presto-player-highlight-color, #fec200); --plyr-captions-background: #000000; --presto-player-logo-width: 150px; \">\n    <presto-player  id=\"presto-player-1\" src=\"\/\/www.youtube.com\/embed\/7SFDs1yLYi8?iv_load_policy=3&amp;modestbranding=1&amp;playinline=1&amp;showinfo=0&amp;rel=0&amp;enablejsapi=1\" media-title=\"Author Popup2\" css=\"\" class=\"presto-video-id-118 presto-preset-id-8 skin-modern caption-style-default\" skin=\"modern\" icon-url=\"https:\/\/theadminbar.com\/wp-content\/plugins\/presto-player\/img\/sprite.svg\" preload=\"\" poster=\"\" playsinline  >\n        \n\n    <\/presto-player>\n<\/figure>        <script>\n            var player = document.querySelector('presto-player#presto-player-1');\n            player.video_id = 118;\n                                                player.preset = {\"id\":8,\"name\":\"Airtable\",\"slug\":\"airtable\",\"icon\":\"\",\"skin\":\"modern\",\"play-large\":true,\"rewind\":false,\"play\":true,\"fast-forward\":false,\"progress\":true,\"current-time\":true,\"mute\":true,\"volume\":true,\"speed\":true,\"pip\":false,\"fullscreen\":true,\"captions\":false,\"reset_on_end\":false,\"auto_hide\":true,\"captions_enabled\":false,\"save_player_position\":false,\"sticky_scroll\":false,\"sticky_scroll_position\":\"\",\"on_video_end\":\"go-to-start\",\"play_video_viewport\":false,\"hide_youtube\":true,\"lazy_load_youtube\":true,\"hide_logo\":false,\"border_radius\":0,\"caption_style\":\"default\",\"caption_background\":\"#000000\",\"is_locked\":false,\"cta\":{\"enabled\":false,\"percentage\":100,\"show_rewatch\":true,\"show_skip\":true,\"headline\":\"\",\"bottom_text\":\"\",\"show_button\":true,\"button_text\":\"\",\"button_color\":\"\",\"button_text_color\":\"\",\"background_opacity\":0,\"button_link\":{\"id\":\"\",\"url\":\"\",\"type\":\"\",\"opensInNewTab\":false},\"button_radius\":0},\"watermark\":{\"enabled\":false,\"text\":\"\",\"backgroundColor\":\"\",\"color\":\"\",\"opacity\":0,\"position\":\"\"},\"email_collection\":{\"enabled\":false,\"behavior\":\"pause\",\"percentage\":0,\"allow_skip\":false,\"provider\":\"\",\"provider_list\":\"\",\"provider_tag\":\"\",\"border_radius\":0,\"headline\":\"\",\"bottom_text\":\"\",\"button_text\":\"\",\"button_color\":null,\"button_text_color\":null},\"action_bar\":{\"enabled\":false,\"percentage_start\":0,\"text\":\"\",\"background_color\":\"\",\"button_type\":\"none\",\"button_count\":false,\"button_text\":\"\",\"button_radius\":0,\"button_color\":\"\",\"button_text_color\":\"\",\"button_link\":{\"id\":\"\",\"url\":\"\",\"type\":\"\",\"opensInNewTab\":false}},\"created_by\":1,\"created_at\":\"2024-04-04 12:14:13\",\"updated_at\":\"2024-04-04 12:14:13\",\"deleted_at\":\"\",\"search\":{\"enabled\":false,\"minMatchCharLength\":1,\"threshold\":0.3,\"placeholder\":\"Search\"},\"show_time_elapsed\":false};\n                                                                player.chapters = [];\n                                                                player.overlays = [];\n                                                                player.tracks = [];\n                                                                player.branding = {\"logo\":\"\",\"color\":\"#fec200\",\"logo_width\":150,\"player_css\":\"\"};\n                                                                player.blockAttributes = {\"id\":118,\"src\":\"https:\\\/\\\/youtu.be\\\/7SFDs1yLYi8\",\"preset\":8,\"video_id\":\"7SFDs1yLYi8\",\"visibility\":\"public\",\"color\":\"#00b3ff\",\"mutedPreview\":{\"enabled\":false,\"captions\":false},\"mutedOverlay\":{\"enabled\":false,\"src\":\"\",\"width\":200,\"focalPoint\":{\"x\":0.5,\"y\":0.5}},\"mutedOverlayType\":\"text\",\"mutedOverlayText\":\"Click to play\",\"mutedOverlayImageWidth\":200,\"playsInline\":true,\"chapters\":[],\"overlays\":[],\"tracks\":[],\"title\":\"Author Popup2\"};\n                                                                                            player.skin = \"modern\";\n                                                                player.analytics = true;\n                                                                player.automations = true;\n                                                                player.provider = \"youtube\";\n                                                                player.video_id = 118;\n                                                                                                                        player.provider_video_id = \"7SFDs1yLYi8\";\n                                                                player.youtube = {\"noCookie\":true,\"channelId\":\"UCFpaZOW58HGW59qN7QhLnng\",\"show_count\":false};\n                                    <\/script>\n        \n\n\n<p>In this video I do a quick walkthrough on how to create a sticky sidebar using <a href=\"https:\/\/theadminbar.com\/generateblocks\/\" target=\"_blank\" rel=\"noreferrer noopener\">GenerateBlocks<\/a>. While it does take a couple lines of CSS (provided below), it&#8217;s a simple process and once the CSS is added you can reuse the same selectors on other parts of your website.<\/p>\n\n\n\n<p>Here&#8217;s the code you will need from the video:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>.sticky-container &gt; .gb-inside-container {\n\theight: 100%;\n}\n\n.sticky-element {\n\tposition: sticky;\n\tposition: -webkit-sticky;\n\ttop: 48px;\n}<\/code><\/pre>\n\n\n\n<h2 class=\"gb-headline gb-headline-90ac896c gb-headline-text\">Step by Step Written Instructions<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"1-open-your-page-in-the-block-editor\">1. Open your page in the block editor<\/h3>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"2-click-to-add-a-new-block\">2. Click to add a new block<\/h3>\n\n\n\n<p><picture><source srcset=\"https:\/\/theadminbar.com\/wp-content\/uploads\/2022\/06\/img_62a463307ab5c.webp \"  type=\"image\/webp\"><img src=\"https:\/\/theadminbar.com\/wp-content\/uploads\/2022\/06\/img_62a463307ab5c.jpg\" width=\"600\" class=\" sp-no-webp\" alt=\"Click to add a new block\" decoding=\"async\"  > <\/picture><\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"3-click-on-container\">3. Click on Container<\/h3>\n\n\n\n<p><picture><source srcset=\"https:\/\/theadminbar.com\/wp-content\/uploads\/2022\/06\/img_62a463328a69a.webp \"  type=\"image\/webp\"><img src=\"https:\/\/theadminbar.com\/wp-content\/uploads\/2022\/06\/img_62a463328a69a.jpg\" width=\"600\" class=\" sp-no-webp\" alt=\"Click on Container\" decoding=\"async\"  > <\/picture><\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"4-click-on-spacing\">4. Click on Spacing<\/h3>\n\n\n\n<p><picture><source srcset=\"https:\/\/theadminbar.com\/wp-content\/uploads\/2022\/06\/img_62a4633464513.webp \"  type=\"image\/webp\"><img src=\"https:\/\/theadminbar.com\/wp-content\/uploads\/2022\/06\/img_62a4633464513.jpg\" width=\"600\" class=\" sp-no-webp\" alt=\"Click on Spacing\" decoding=\"async\"  > <\/picture><\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"5-add-padding-to-your-section\">5. Add padding to your section<\/h3>\n\n\n\n<p><picture><source srcset=\"https:\/\/theadminbar.com\/wp-content\/uploads\/2022\/06\/img_62a4633638a4b.webp \"  type=\"image\/webp\"><img src=\"https:\/\/theadminbar.com\/wp-content\/uploads\/2022\/06\/img_62a4633638a4b.jpg\" width=\"600\" class=\" sp-no-webp\" alt=\"Add padding to your section\" decoding=\"async\"  > <\/picture><\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"6-click-on-add-block\">6. Click on Add block<\/h3>\n\n\n\n<p><picture><source srcset=\"https:\/\/theadminbar.com\/wp-content\/uploads\/2022\/06\/img_62a4633828985.webp \"  type=\"image\/webp\"><img src=\"https:\/\/theadminbar.com\/wp-content\/uploads\/2022\/06\/img_62a4633828985.jpg\" width=\"600\" class=\" sp-no-webp\" alt=\"Click on Add block\" decoding=\"async\"  > <\/picture><\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"7-add-a-grid-block\">7. Add a Grid block<\/h3>\n\n\n\n<p><picture><source srcset=\"https:\/\/theadminbar.com\/wp-content\/uploads\/2022\/06\/img_62a4633ae42a9.webp \"  type=\"image\/webp\"><img src=\"https:\/\/theadminbar.com\/wp-content\/uploads\/2022\/06\/img_62a4633ae42a9.jpg\" width=\"600\" class=\" sp-no-webp\" alt=\"Add a Grid block\" decoding=\"async\"  > <\/picture><\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"8-choose-a-2-column-grid\">8. Choose a 2-column grid<\/h3>\n\n\n\n<p><picture><source srcset=\"https:\/\/theadminbar.com\/wp-content\/uploads\/2022\/06\/img_62a4633d1290f.webp \"  type=\"image\/webp\"><img src=\"https:\/\/theadminbar.com\/wp-content\/uploads\/2022\/06\/img_62a4633d1290f.jpg\" width=\"600\" class=\" sp-no-webp\" alt=\"Choose a 2-column grid\" decoding=\"async\"  > <\/picture><\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"9-select-the-first-container-in-your-grid\">9. Select the first container in your grid<\/h3>\n\n\n\n<p><picture><source srcset=\"https:\/\/theadminbar.com\/wp-content\/uploads\/2022\/06\/img_62a4633ef02db.webp \"  type=\"image\/webp\"><img src=\"https:\/\/theadminbar.com\/wp-content\/uploads\/2022\/06\/img_62a4633ef02db.jpg\" width=\"600\" class=\" sp-no-webp\" alt=\"Select the first container in your grid\" decoding=\"async\"  > <\/picture><\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"10-change-the-width-to-66\">10. Change the width to 66%<\/h3>\n\n\n\n<p><picture><source srcset=\"https:\/\/theadminbar.com\/wp-content\/uploads\/2022\/06\/img_62a46340cefe4.webp \"  type=\"image\/webp\"><img src=\"https:\/\/theadminbar.com\/wp-content\/uploads\/2022\/06\/img_62a46340cefe4.jpg\" width=\"600\" class=\" sp-no-webp\" alt=\"Change the width to 66%\" decoding=\"async\"  > <\/picture><\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"11-select-the-2nd-container-in-your-grid\">11. Select the 2nd container in your grid<\/h3>\n\n\n\n<p><picture><source srcset=\"https:\/\/theadminbar.com\/wp-content\/uploads\/2022\/06\/img_62a463434e147.webp \"  type=\"image\/webp\"><img src=\"https:\/\/theadminbar.com\/wp-content\/uploads\/2022\/06\/img_62a463434e147.jpg\" width=\"600\" class=\" sp-no-webp\" alt=\"Select the 2nd container in your grid\" decoding=\"async\"  > <\/picture><\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"12-change-the-width-to-33\">12. Change the width to 33%<\/h3>\n\n\n\n<p><picture><source srcset=\"https:\/\/theadminbar.com\/wp-content\/uploads\/2022\/06\/img_62a4634533aec.webp \"  type=\"image\/webp\"><img src=\"https:\/\/theadminbar.com\/wp-content\/uploads\/2022\/06\/img_62a4634533aec.jpg\" width=\"600\" class=\" sp-no-webp\" alt=\"Change the width to 33%\" decoding=\"async\"  > <\/picture><\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"13-select-the-grid-block\">13. Select the grid block<\/h3>\n\n\n\n<p><picture><source srcset=\"https:\/\/theadminbar.com\/wp-content\/uploads\/2022\/06\/img_62a46347beeeb.webp \"  type=\"image\/webp\"><img src=\"https:\/\/theadminbar.com\/wp-content\/uploads\/2022\/06\/img_62a46347beeeb.jpg\" width=\"600\" class=\" sp-no-webp\" alt=\"Select the grid block\" decoding=\"async\"  > <\/picture><\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"14-add-60px-of-horizontal-gap\">14. Add 60px of Horizontal Gap<\/h3>\n\n\n\n<p><picture><source srcset=\"https:\/\/theadminbar.com\/wp-content\/uploads\/2022\/06\/img_62a4634a1ba84.webp \"  type=\"image\/webp\"><img src=\"https:\/\/theadminbar.com\/wp-content\/uploads\/2022\/06\/img_62a4634a1ba84.jpg\" width=\"600\" class=\" sp-no-webp\" alt=\"Add 60px of Horizontal Gap\" decoding=\"async\"  > <\/picture><\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"15-fill-your-left-container-with-content\">15. Fill your left container with content<\/h3>\n\n\n\n<p>You&#8217;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 &#8220;stick&#8221;.<\/p>\n\n\n\n<p><picture><source srcset=\"https:\/\/theadminbar.com\/wp-content\/uploads\/2022\/06\/img_62a4634bf02da.webp \"  type=\"image\/webp\"><img src=\"https:\/\/theadminbar.com\/wp-content\/uploads\/2022\/06\/img_62a4634bf02da.jpg\" width=\"600\" class=\" sp-no-webp\" alt=\"Fill your left container with content\" decoding=\"async\"  > <\/picture><\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"16-click-on-list-view\">16. Click on List View<\/h3>\n\n\n\n<p><picture><source srcset=\"https:\/\/theadminbar.com\/wp-content\/uploads\/2022\/06\/img_62a4634dc496b.webp \"  type=\"image\/webp\"><img src=\"https:\/\/theadminbar.com\/wp-content\/uploads\/2022\/06\/img_62a4634dc496b.jpg\" width=\"600\" class=\" sp-no-webp\" alt=\"Click on List View\" decoding=\"async\"  > <\/picture><\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"17-click-on-the-2nd-container-in-your-grid\">17. Click on the 2nd container in your grid<\/h3>\n\n\n\n<p><picture><source srcset=\"https:\/\/theadminbar.com\/wp-content\/uploads\/2022\/06\/img_62a4634fab562.webp \"  type=\"image\/webp\"><img src=\"https:\/\/theadminbar.com\/wp-content\/uploads\/2022\/06\/img_62a4634fab562.jpg\" width=\"600\" class=\" sp-no-webp\" alt=\"Click on the 2nd container in your grid\" decoding=\"async\"  > <\/picture><\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"18-click-on-add-block\">18. Click on Add block<\/h3>\n\n\n\n<p><picture><source srcset=\"https:\/\/theadminbar.com\/wp-content\/uploads\/2022\/06\/img_62a46351c8d12.webp \"  type=\"image\/webp\"><img src=\"https:\/\/theadminbar.com\/wp-content\/uploads\/2022\/06\/img_62a46351c8d12.jpg\" width=\"600\" class=\" sp-no-webp\" alt=\"Click on Add block\" decoding=\"async\"  > <\/picture><\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"19-add-a-container\">19. Add a container<\/h3>\n\n\n\n<p>This will house everything you want to &#8220;stick&#8221;<\/p>\n\n\n\n<p><picture><source srcset=\"https:\/\/theadminbar.com\/wp-content\/uploads\/2022\/06\/img_62a46353bfa48.webp \"  type=\"image\/webp\"><img src=\"https:\/\/theadminbar.com\/wp-content\/uploads\/2022\/06\/img_62a46353bfa48.jpg\" width=\"600\" class=\" sp-no-webp\" alt=\"Add a container\" decoding=\"async\"  > <\/picture><\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"20-click-on-colors-optional\">20. Click on Colors (optional)<\/h3>\n\n\n\n<p><picture><source srcset=\"https:\/\/theadminbar.com\/wp-content\/uploads\/2022\/06\/img_62a46355e0a21.webp \"  type=\"image\/webp\"><img src=\"https:\/\/theadminbar.com\/wp-content\/uploads\/2022\/06\/img_62a46355e0a21.jpg\" width=\"600\" class=\" sp-no-webp\" alt=\"Click on Colors\" decoding=\"async\"  > <\/picture><\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"21-choose-a-background-color-for-your-container-optional\">21. Choose a background color for your container (optional)<\/h3>\n\n\n\n<p><picture><source srcset=\"https:\/\/theadminbar.com\/wp-content\/uploads\/2022\/06\/img_62a46357ca7d8.webp \"  type=\"image\/webp\"><img src=\"https:\/\/theadminbar.com\/wp-content\/uploads\/2022\/06\/img_62a46357ca7d8.jpg\" width=\"600\" class=\" sp-no-webp\" alt=\"Choose a background color for your container (optional)\" decoding=\"async\"  > <\/picture><\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"22-click-on-spacing\">22. Click on &#8220;Spacing&#8221;<\/h3>\n\n\n\n<p><picture><source srcset=\"https:\/\/theadminbar.com\/wp-content\/uploads\/2022\/06\/img_62a46359e470e.webp \"  type=\"image\/webp\"><img src=\"https:\/\/theadminbar.com\/wp-content\/uploads\/2022\/06\/img_62a46359e470e.jpg\" width=\"600\" class=\" sp-no-webp\" alt=\"Click on \"Spacing\"\" decoding=\"async\"  > <\/picture><\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"23-add-padding-to-your-container\">23. Add padding to your container<\/h3>\n\n\n\n<p>If your design requires it, give your sticky container some padding.<\/p>\n\n\n\n<p><picture><source srcset=\"https:\/\/theadminbar.com\/wp-content\/uploads\/2022\/06\/img_62a4635beb667.webp \"  type=\"image\/webp\"><img src=\"https:\/\/theadminbar.com\/wp-content\/uploads\/2022\/06\/img_62a4635beb667.jpg\" width=\"600\" class=\" sp-no-webp\" alt=\"Add padding to your container\" decoding=\"async\"  > <\/picture><\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"24-click-on-add-block\">24. Click on Add block<\/h3>\n\n\n\n<p><picture><source srcset=\"https:\/\/theadminbar.com\/wp-content\/uploads\/2022\/06\/img_62a4635e0753a.webp \"  type=\"image\/webp\"><img src=\"https:\/\/theadminbar.com\/wp-content\/uploads\/2022\/06\/img_62a4635e0753a.jpg\" width=\"600\" class=\" sp-no-webp\" alt=\"Click on Add block\" decoding=\"async\"  > <\/picture><\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"25-add-a-heading-block-inside-your-inner-container\">25. Add a heading block inside your inner container<\/h3>\n\n\n\n<p><picture><source srcset=\"https:\/\/theadminbar.com\/wp-content\/uploads\/2022\/06\/img_62a4635fbf6ca.webp \"  type=\"image\/webp\"><img src=\"https:\/\/theadminbar.com\/wp-content\/uploads\/2022\/06\/img_62a4635fbf6ca.jpg\" width=\"600\" class=\" sp-no-webp\" alt=\"Add a heading block inside your inner container\" decoding=\"async\"  > <\/picture><\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"26-enter-the-text-you-want-to-add\">26. Enter the text you want to add<\/h3>\n\n\n\n<p>Or add any other type of block you want to have inside your sticky sidebar. For demo purposes we&#8217;re only going to add a heading.<\/p>\n\n\n\n<p><picture><source srcset=\"https:\/\/theadminbar.com\/wp-content\/uploads\/2022\/06\/img_62a46361c7237.webp \"  type=\"image\/webp\"><img src=\"https:\/\/theadminbar.com\/wp-content\/uploads\/2022\/06\/img_62a46361c7237.jpg\" width=\"600\" class=\" sp-no-webp\" alt=\"Enter the text you want to add\" decoding=\"async\"  > <\/picture><\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"27-select-the-inner-container\">27. Select the inner container<\/h3>\n\n\n\n<p>This is the container we added a background color to. The &#8220;sticky&#8221; container.<\/p>\n\n\n\n<p><picture><source srcset=\"https:\/\/theadminbar.com\/wp-content\/uploads\/2022\/06\/img_62a46363bcda1.webp \"  type=\"image\/webp\"><img src=\"https:\/\/theadminbar.com\/wp-content\/uploads\/2022\/06\/img_62a46363bcda1.jpg\" width=\"600\" class=\" sp-no-webp\" alt=\"Select the inner container\" decoding=\"async\"  > <\/picture><\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"28-click-on-advanced\">28. Click on Advanced<\/h3>\n\n\n\n<p><picture><source srcset=\"https:\/\/theadminbar.com\/wp-content\/uploads\/2022\/06\/img_62a46365a7fcd.webp \"  type=\"image\/webp\"><img src=\"https:\/\/theadminbar.com\/wp-content\/uploads\/2022\/06\/img_62a46365a7fcd.jpg\" width=\"600\" class=\" sp-no-webp\" alt=\"Click on Advanced\" decoding=\"async\"  > <\/picture><\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"29-type-sticky-element-in-the-additional-css-field\">29. Type &#8220;sticky-element&#8221; in the Additional CSS field<\/h3>\n\n\n\n<p><picture><source srcset=\"https:\/\/theadminbar.com\/wp-content\/uploads\/2022\/06\/img_62a463678c72b.webp \"  type=\"image\/webp\"><img src=\"https:\/\/theadminbar.com\/wp-content\/uploads\/2022\/06\/img_62a463678c72b.jpg\" width=\"600\" class=\" sp-no-webp\" alt=\"Type \"sticky-element\" in the Additional CSS field\" decoding=\"async\"  > <\/picture><\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"30-click-on-the-outer-container\">30. Click on the outer container<\/h3>\n\n\n\n<p>This is the container that houses our &#8220;sticky&#8221; container, and will act as the track the sticky container stays within.<\/p>\n\n\n\n<p><picture><source srcset=\"https:\/\/theadminbar.com\/wp-content\/uploads\/2022\/06\/img_62a463698fbe7.webp \"  type=\"image\/webp\"><img src=\"https:\/\/theadminbar.com\/wp-content\/uploads\/2022\/06\/img_62a463698fbe7.jpg\" width=\"600\" class=\" sp-no-webp\" alt=\"Click on the outer container\" decoding=\"async\"  > <\/picture><\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"31-click-on-advanced\">31. Click on Advanced<\/h3>\n\n\n\n<p><picture><source srcset=\"https:\/\/theadminbar.com\/wp-content\/uploads\/2022\/06\/img_62a4636b6c1c6.webp \"  type=\"image\/webp\"><img src=\"https:\/\/theadminbar.com\/wp-content\/uploads\/2022\/06\/img_62a4636b6c1c6.jpg\" width=\"600\" class=\" sp-no-webp\" alt=\"Click on Advanced\" decoding=\"async\"  > <\/picture><\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"32-type-sticky-container\">32. Type &#8220;sticky-container&#8221;<\/h3>\n\n\n\n<p><picture><source srcset=\"https:\/\/theadminbar.com\/wp-content\/uploads\/2022\/06\/img_62a4636dd4126.webp \"  type=\"image\/webp\"><img src=\"https:\/\/theadminbar.com\/wp-content\/uploads\/2022\/06\/img_62a4636dd4126.jpg\" width=\"600\" class=\" sp-no-webp\" alt=\"Type \"sticky-container\"\" decoding=\"async\"  > <\/picture><\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"33-click-on-update\">33. Click on Update<\/h3>\n\n\n\n<p><picture><source srcset=\"https:\/\/theadminbar.com\/wp-content\/uploads\/2022\/06\/img_62a4636fdade5.webp \"  type=\"image\/webp\"><img src=\"https:\/\/theadminbar.com\/wp-content\/uploads\/2022\/06\/img_62a4636fdade5.jpg\" width=\"600\" class=\" sp-no-webp\" alt=\"Click on Update\" decoding=\"async\"  > <\/picture><\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"34-click-on-view-page\">34. Click on View Page<\/h3>\n\n\n\n<p><picture><source srcset=\"https:\/\/theadminbar.com\/wp-content\/uploads\/2022\/06\/img_62a46371c639e.webp \"  type=\"image\/webp\"><img src=\"https:\/\/theadminbar.com\/wp-content\/uploads\/2022\/06\/img_62a46371c639e.jpg\" width=\"600\" class=\" sp-no-webp\" alt=\"Click on View Page\" decoding=\"async\"  > <\/picture><\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"35-click-on-customize\">35. Click on Customize<\/h3>\n\n\n\n<p><picture><source srcset=\"https:\/\/theadminbar.com\/wp-content\/uploads\/2022\/06\/img_62a463743287e.webp \"  type=\"image\/webp\"><img src=\"https:\/\/theadminbar.com\/wp-content\/uploads\/2022\/06\/img_62a463743287e.jpg\" width=\"600\" class=\" sp-no-webp\" alt=\"Click on Customize\" decoding=\"async\"  > <\/picture><\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"36-click-on-additional-css\">36. Click on Additional CSS\u2026<\/h3>\n\n\n\n<p><picture><source srcset=\"https:\/\/theadminbar.com\/wp-content\/uploads\/2022\/06\/img_62a4637624ecd.webp \"  type=\"image\/webp\"><img src=\"https:\/\/theadminbar.com\/wp-content\/uploads\/2022\/06\/img_62a4637624ecd.jpg\" width=\"600\" class=\" sp-no-webp\" alt=\"Click on Additional CSS\u2026\" decoding=\"async\"  > <\/picture><\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"37-click-on-css-code\">37. Click on CSS code<\/h3>\n\n\n\n<p><picture><source srcset=\"https:\/\/theadminbar.com\/wp-content\/uploads\/2022\/06\/img_62a4637802629.webp \"  type=\"image\/webp\"><img src=\"https:\/\/theadminbar.com\/wp-content\/uploads\/2022\/06\/img_62a4637802629.jpg\" width=\"600\" class=\" sp-no-webp\" alt=\"Click on CSS code\" decoding=\"async\"  > <\/picture><\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"38-paste-selected-text-into-text\">38. Paste selected text into text<\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code>.sticky-element {\n\tposition: sticky;\n\tposition: -webkit-sticky;\n\ttop: 48px;\n}\n\n.sticky-container > .gb-inside-container {\n\theight: 100%;\n}\n<\/code><\/pre>\n\n\n\n<p>The first line of CSS will set your inner container to be sticky, and the second line will make your outer container (the &#8220;track&#8221;) the full height of your section.<\/p>\n\n\n\n<p><picture><source srcset=\"https:\/\/theadminbar.com\/wp-content\/uploads\/2022\/06\/img_62a46379d2182.webp \"  type=\"image\/webp\"><img src=\"https:\/\/theadminbar.com\/wp-content\/uploads\/2022\/06\/img_62a46379d2182.jpg\" width=\"600\" class=\" sp-no-webp\" alt=\"Paste selected text into text\" decoding=\"async\"  > <\/picture><\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"39-click-on-publish\">39. Click on Publish<\/h3>\n\n\n\n<p><picture><source srcset=\"https:\/\/theadminbar.com\/wp-content\/uploads\/2022\/06\/img_62a4637baf2f7.webp \"  type=\"image\/webp\"><img src=\"https:\/\/theadminbar.com\/wp-content\/uploads\/2022\/06\/img_62a4637baf2f7.jpg\" width=\"600\" class=\" sp-no-webp\" alt=\"Click on save\" decoding=\"async\"  > <\/picture><\/p>\n","protected":false},"excerpt":{"rendered":"<p>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&#8217;s a simple process &#8230; <a title=\"Create a Sticky Sidebar with GenerateBlocks\" class=\"read-more\" href=\"https:\/\/theadminbar.com\/create-a-sticky-sidebar-with-generateblocks\/\" aria-label=\"Read more about Create a Sticky Sidebar with GenerateBlocks\">Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":17249,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_eb_attr":"","_piecal_is_recurring":false,"_piecal_recurring_interval":1,"_piecal_recurring_frequency":"","_piecal_recurring_exact_position":false,"_piecal_recurring_end":"","_piecal_color":"","_piecal_text_color":"","_piecal_global_color_master":false,"_piecal_is_event":false,"_piecal_start_date":"","_piecal_end_date":"","_piecal_is_allday":false,"sync_status":"","episode_type":"","audio_file":"","castos_file_data":"","podmotor_file_id":"","cover_image":"","cover_image_id":"","duration":"","filesize":"","filesize_raw":"","date_recorded":"","explicit":"","block":"","footnotes":""},"categories":[187],"tags":[],"banner":[],"acf":[],"_links":{"self":[{"href":"https:\/\/theadminbar.com\/wp-json\/wp\/v2\/posts\/16990"}],"collection":[{"href":"https:\/\/theadminbar.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/theadminbar.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/theadminbar.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/theadminbar.com\/wp-json\/wp\/v2\/comments?post=16990"}],"version-history":[{"count":0,"href":"https:\/\/theadminbar.com\/wp-json\/wp\/v2\/posts\/16990\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/theadminbar.com\/wp-json\/wp\/v2\/media\/17249"}],"wp:attachment":[{"href":"https:\/\/theadminbar.com\/wp-json\/wp\/v2\/media?parent=16990"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/theadminbar.com\/wp-json\/wp\/v2\/categories?post=16990"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/theadminbar.com\/wp-json\/wp\/v2\/tags?post=16990"},{"taxonomy":"banner","embeddable":true,"href":"https:\/\/theadminbar.com\/wp-json\/wp\/v2\/banner?post=16990"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}