{"id":13429,"date":"2023-12-21T15:45:34","date_gmt":"2023-12-21T10:15:34","guid":{"rendered":"https:\/\/bloggingidol.com\/?p=13429"},"modified":"2023-12-21T16:14:49","modified_gmt":"2023-12-21T10:44:49","slug":"astra-sticky-sidebar","status":"publish","type":"post","link":"https:\/\/bloggingidol.com\/astra-sticky-sidebar\/","title":{"rendered":"How To Make Sticky Sidebar In Astra Theme?"},"content":{"rendered":"\n

In this post of Astra tutorial<\/a><\/strong>, I will teach you how to make an Astra sticky sidebar to fix your favourite widgets on the visitor’s viewport.<\/p>\n\n\n\n

Did you know that sidebars are actually a crucial aspect of any website, especially when it comes to the blog section?<\/p>\n\n\n\n

They’re a great way to connect with your audience and keep them engaged.<\/p>\n\n\n\n

Plus, they also help reduce your bounce rate while boosting click-through rates on the most important parts of your site. So don’t underestimate the power of a well-designed sidebar!<\/p>\n\n\n\n

Following are steps in brief to easily create sticky sidebar in Astra theme<\/p>\n\n\n\n

    \n
  1. Install the Fixed Widget & Sticky Elements for WordPress plugin<\/li>\n\n\n\n
  2. Under Appearance, click on Fixed Widget<\/li>\n\n\n\n
  3. From the inspect tool, find out the class of the sidebar widget you want to stick<\/li>\n\n\n\n
  4. Write that class name in the Custom Fixed Elements box<\/li>\n\n\n\n
  5. Click on Save Changes<\/li>\n<\/ol>\n\n\n\n

    But, the Astra sticky sidebar feature is not available with its free and pro versions. <\/p>\n\n\n\n

    As per WP Astra’s documentation<\/a><\/strong> a sticky sidebar feature in the theme customizer is only available for WooCommerce.<\/p>\n\n\n\n

    Then what about single posts, blog page, and WordPress pages?<\/p>\n\n\n\n

    Thus, we will not only learn how to overcome the problem, but also learn how to create an Astra sticky sidebar using a plugin as well.<\/p>\n\n\n\n

    There are two methods to stick a sidebar in Astra theme, one is via using a plugin and another one is by using CSS.<\/p>\n\n\n\n

    We will see both the methods in detail.<\/p>\n\n\n\n

    \n
    \n

    Table of Contents<\/p>\nToggle<\/span><\/path><\/svg><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n