How to Show Last Widget Fixed in GeneratePress Theme Sidebar?

In our earlier article, we have explained how to use fixed widget in WordPress site’s sidebar using a plugin. However, adding a last fixed widget in GeneratePress theme is super easy. You do not need any plugin and a simple CSS code will do the trick for you.

Sidebar Sticky Widget in GeneratePress

There are few things you need to make sure before making the last widget fixed in your sidebar.

• Whether you have the sidebar on right side or left side.
• Last widget is not overlapping on the footer.
• There is sufficient space on top when the widget starts floating.
• Fixed widget works only on large desktop devices and is disabled on mobiles.

Follow one of the below methods depending on whether you want to show the fixed widget on site widget or only on few pages.

Last Widget Fixed on Site Wide Sidebar

Follow the below steps, if you want to show the last widget on your sidebar as fixed on site wide.

• Login to your WordPress admin panel and navigate to “Appearance > Customize” section.
• Click “Additional CSS” option showing on left sidebar.

• Copy and paste the following CSS code in the additional CSS box.

@media (min-width: 769px) {
.inside-right-sidebar {
   height: 90%;
}
.inside-right-sidebar aside:last-child {
   position: -webkit-sticky;
   position: sticky;
   top: 40px;
}
}

• Click “Publish” button to save your changes.

Now, open any page on your site and scroll the content. You should see the last item in the sidebar is floating as a fixed widget and moves up when the footer is reaching. Here is how the code works and you may need to adjust the parameters for your site.

• Minimum width 769 pixels is used to show the fixed widget only on the devices larger than 769 pixels.
• Change the class .inside-right-sidebar to .inside-left-sidebar if you are using left sidebar on your site.
• The space on top position is defined with top: 40 px; and you can change it to adjust the empty space showing on top of floating widget. Otherwise, your floating widget will have no margin below the previous widget or below the top menu bar when you do not have any previous widgets.
• To avoid overlapping with footer, height: 90%; is used. You can change this as per your site’s footer layout’s height and where exactly you want to stop the floating of the last sidebar widget.

Fixed Widget for Custom Sidebar Created with Elements

GeneratePress theme also allows you to create custom sidebar and override the default right or left sidebar on your site under “Appearance > Elements” section. This is also recommended for creating custom sidebars when you are using GenerateBlocks plugin.

So, if you are using a custom sidebar created with GeneratePress Elements, then you need to replace the .inside-right-sidebar in the above code and link the correct container block.

• Go to “Appearance > Elements” section and edit your custom sidebar.
• Select the container block of your last sidebar widget and scroll down to bottom of the headings under “Block” tab on right side.

• Expand “Advanced” section and add sticky-container class name in the “Additional CSS Class(es)” box.

• Click “Update” button to publish your changes.
• Now, go to “Appearance > Customize > Additional CSS” section and add the below CSS code.

@media (min-width: 768px) {
.inside-right-sidebar {
   height: 90%;
}
.sticky-container {
   position: -webkit-sticky;
   position: sticky;
   top: 80px;
}
}

• Click “Publish” button to apply your changes.

Check your page and you should see the last widget is fixed on your custom right sidebar. As explained, you can change the code to left sidebar and adjust top / height parameters if required. Note that you can use multiple blocks inside a single container and float them all using this option. This is not possible when using the theme’s sidebar with the blocks added under “Appearance > Widgets” section.

Fixed Last Widget on Specific Pages

Using custom sidebar only on specific posts is super easy with GeneratePress Elements. You can simply select the “Location” as “Post” and select a specific post from the list instead of using “Entire Site” option. Click “Add Location Rule” button to add additional posts in the list to show custom sidebar.

However, if you are not using Elements, then you need to find a way to add the CSS code on individual post level instead of adding in customizer section. You can check our article on how to add CSS on page level in WordPress to learn more about this. Once the CSS is added on a specific post, the sidebar widget will be fixed and floating only on that post. All other posts will show the same sidebar widget without floating when scrolling the content.  

Importing Demo Site with Fixed Sidebar

GeneratePress also offers few demo sites with a fixed sidebar widget. For example, you can check the demo of Info site where the right sidebar has one floating widget. If you like that magazine style demo site, then the best option is to simply import that demo. This will automatically create custom right sidebar Elements block and add custom sticky CSS code in customizer. You can adjust other layout sections like header and footer to quickly start publishing content on your site.

This is a good option when you are creating a new site. However, if you want to make last widget fixed on your existing site’s sidebar, then follow one of the above explained methods instead of demo import.