How to Get Sticky (Floating) Sidebar 5 Smart Ways

In 2016, a sticky sidebar was rare to see, but now, anyone can have a floating sidebar on their blog. A good sidebar is especially important if you want to collect leads or show your latest posts and ads.

Sidebar is a good place to earn some money as well. But, even in a modern time, some themes don’t support a floating sidebar. If your WordPress theme is one of them, then you’re at the right place.

We are gonna look at some of the most effective ways that can help us get a fixed/floating sidebar.

What exactly is a sticky sidebar

A sticky, fixed, or floating sidebar widget in WordPress is a widget that is locked into place, so when a visitor scrolls down the post/page, it doesn’t disappear instead, it stays there. In other words, the information located in the sticky sidebar is available at any time.

Credit: wpadvancedads.com

A floating sidebar is really important if your main source of income is Ad. Ad companies such as Ezoic, Mediavine, Adthrive require a sticky bar to increase ad revenue.

These companies, use a piece of code to fix your sidebar. On average, having a sticky sidebar on your website can increase the Ad revenue by 20%

Fixed sidebars get more impressions and more active view viewable compared to non-fixed sidebars, and that’s the reason why Ad optimization companies demand a floating sidebar.

How to get a Sticky Sidebar (Plugin Method)

I recommend only 5 plugins, I normally recommend more than that but this time, there are only five plugins that work flawlessly.

I will still list some plugins that you can test, but I don’t recommend them because they all have some flaws.

1. WP Sticky Sidebar – Floating Sidebar On Scroll for Any Theme

It is the best plugin, it works with any theme. This plugin has over 10,000 active installations with more than 100 five-star reviews. I recommend it because I’ve used it on my blog.

Let’s see how to set up WP Sticky Sidebar

  • Step 1: Install and Activate

Go to your WordPress Plugin area, and search “sticky sidebar”. Click on Install and then Activate.

  • Step 2: Just Click Save

Once the plugin is successfully activated, a new page will open where you can set up WP Sticky Sidebar. You won’t have much to do because this plugin doesn’t offer almost any feature for free.

Just scroll down to the button and click Save.

Your site’s sidebar will become a floating sidebar. That’s how simple it is.

What if it’s not working?

If the sidebar is still not fixed, in that case, you have to enter a correct  CSS class or id.

To find a CSS class or ID, you can open a page where a sidebar is available. Right-click on the sidebar, and then click Inspect. Now, your browser will open a little window in which your site’s HTML code.

Now, again right-click on the sidebar, and you’ll find the CSS class in the HTML code Window.

CSS-Class

As you can see in the above screenshot, the CSS Class of my site is ‘ct-sticky-widgets’, so I’ll simply copy the code, come back to the plugin’s dashboard, enter the code and click Save.

Also, if you want more features, you can upgrade to premium at any time.

Their cheapest plan starts with $19 per year which is way too expensive, with this amount, you can literally buy a theme that has sticky sidebars. I don’t recommend upgrading this plugin just because it’s too expensive.

2. Fixed Widget and Sticky Elements for WordPress

This is plugin was previously known as Q2W3, they have changed their name recently, but the class of this plugin is still there. In fact, it performs even better now.

According to the developer of this plugin, in version 6.0.0 they have fixed many edge cases like jumping, reloading, or resizing widgets.
The new version also resolves bad Cumulative Layout Shifts.

Features of this plugin

Here are some advantages of using this plugin according to the developer.

  • Sticky Widgets Use the Fixed Widget option on any widget and blocks in the sidebar
  • Sticky Elements Choose any element on your site and make it sticky
  • Margin Top allows you to stop sticky elements to cover floating menu bars
  • Margin Bottom pushes sticky elements up before they reach a certain distance towards the bottom window
  • Stop Elements push sticky elements up when they are scrolling into view
  • Stop Blocks defines blocks in your sidebar that push fixed blocks out of the page
  • Minimum Screen Width and Minimum Screen Height allow you to disable sticky behavior on small screens
How to set up Fixed Widget and Sticky Elements for WordPress Plugin

Follow the steps shown below to set up perfectly.

  • Step 1: Install and Activate

To install this plugin, simply go to your WordPress dashboard, Plugins, and then Add New Plugin. In the search bar, search “Fixed Widget”, you’ll find it. After that click on install and then activate.

  • Step 2: Go to the settings

Once the plugin is successfully activated, go to the setting of it. In the settings, you can set height, width, stop element, and top & bottom margin.

If you’re a beginner, leave it as it is because playing with it without knowing how it works may cause problems.

  • Step 3: Visit Widgets area in Appearance

In the Widget area, you check the widgets that are present in your sidebar.

  • Step 4: Select the widget

Select the widget that you want to fix and click save.

Now, check the page/post, check if the widget is sticking or not.

3. Sticky Menu & Sticky Header

Sticky Menu & Sticky Header is another great plugin that can do the job for you. I’ve ranked this plugin third just because it mainly focuses on sticking header not sidebar.

If you want a plugin that can stick both header and sidebar, this plugin is for you. It has over 100,000 installations which are by far more than any other plugin on this list. It also has over 500 five-star ratings which tells how much people trust it.

This plugin is also a little heavy compared to the above two. It may impact CPU usage which won’t be good especially if you’re on the shared hosting plan.

Also, it advertises too much which can be annoying sometimes.

  • Step 1: Install and Activate

Search “Sticky Menu & Sticky Header” in the plugin search box. Once you find it, click install and activate.

  • Step 2: Go to the Settings and enter Sticky Element

Once the plugin is successfully activated, go to its settings section and enter the Sticky Element, e.g. #main-navigation, OR .main-menu-1, OR header nav, etc.

Click Save once it’s done.

Also, this plugin gives a lot of options to play with. You adjust settings according to your website.

How to get a Sticky Sidebar (With Coding)

If you can code, go for the coding method, it is 200% better than the plugin method. Plugins increase server usage which is terrible for your site. Coding can help you in getting rid of these extra plugins that are making your website slow.

It’s easy to get sticky sidebars with just a bit of HTML and CSS know-how. You could use a CSS framework like Bootstrap CSS for your sidebar

There are several ways to create an awesome sticky sidebar with CSS. So let’s do that!

To complete a sticky sidebar effect, use the following HTML and CSS:

(Credit: Hubspot)

 
<!-- HTML -->

<body>

<div class="sidebar">
<div>Menu Item 1</div>
<div>Menu Item 2</div>
<div>Menu Item 3</div>
</div>

<div class="body-text">
<!-- body content -->
</div>

</body>
 
/* CSS */

.sidebar {
height: 200px;
width: 150px;
position: -webkit-sticky; /* for Safari users */
position: sticky;
top: 0px;
float: right;
margin-top: 100px;
padding-top: 40px;
background-color: lightblue;
}

.sidebar div {
padding: 8px;
font-size: 24px;
display: block;
}

.body-text {
margin-right: 150px;
font-size: 18px;
}

In this code, the position: sticky declaration suggests the sidebar div to “stick” to the top border of its parent container, which is the viewport here.

For Fixed Sidebar, follow this:

To make a fixed sidebar, use the below code:

 
<!-- HTML -->

<body>

<div class="sidebar">
<div>Menu Item 1</div>
<div>Menu Item 2</div>
<div>Menu Item 3</div>
</div>

<div class="body-text">
<!-- body content -->
</div>

</body>
 
/* CSS */

.sidebar {
height: 200px;
width: 150px;
position: fixed;
top: 0;
left: 0;
padding-top: 40px;
background-color: lightblue;
}

.sidebar div {
padding: 8px;
font-size: 24px;
display: block;
}

.body-text {
margin-left: 150px;
font-size: 18px;
}

If you want the sidebar to the right side of the viewport, use the following CSS instead:

 
/* CSS */

.sidebar {
height: 200px;
width: 150px;
position: fixed;
top: 0;
right: 0;
padding-top: 40px;
background-color: lightblue;
}

.sidebar div {
padding: 8px;
font-size: 24px;
display: block;
}

.body-text {
margin-right: 150px;
font-size: 18px;
}

How to create Bootstrap Sticky Sidebar

1. In the first step, load the Bootstrap CSS by adding the below CDN link to your webpage, it helps.

<!-- Bootstrap CSS -->
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.css'>

2. Create a basic page layout (like header, content section, and sidebar) in HTML as follows:

<article>
    <div class="container-fluid">
        <div class="row">
            <div class="col">
                <div class="title-section">
                    <h1>Bootstrap 4 Sticky Sidebar on Scroll Example</h1>
                </div>
            </div>
        </div>
        <div class="container">
        <div class="row">
            <div class="col-7">

                <div class="content-section">
                    <h2>Content Section</h2>
                </div>
            </div>
            <div class="col-5">

              <div class="sidebar-item">
                  <div class="widget">
                  <h3> Item 1</h3> 
                  </div>
                  
                <div class="widget make-me-sticky">
                  <h3 style="background: pink">Item 2 (sticky)</h3>
                  
                </div>
                <div class="widget make-me-sticky">
                  <h3>Item 3 (sticky)</h3>
                </div>
              </div>
            </div>
        </div>
     </div>
    </div>
</article>

3. Add the below custom CSS to style the sidebar. The "make-me-sticky" class utilizes the CSS sticky property to fixed the (widget) item on the top of the scroll.

.content-section {
  min-height: 2000px;
}

.sidebar-section {
  position: absolute;
  height: 100%;
  width: 100%;
}

.sidebar-item {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* Position the items */
}

.widget{
    padding: 0 15px;
    margin: 15px 0;
}

.make-me-sticky {
  position: -webkit-sticky;
  position: sticky;
  top: 0; 
}

/* Ignore This, just coloring */
body {
  background: #fff;
}

article {
  background: #f1f1f1;
  border-radius: 12px;
  padding: 25px;
}

.title-section, .content-section, .sidebar-section {
  background: #fff;
}

.title-section {
  text-align: center;
  padding: 50px 15px;
  margin-bottom: 30px;
}

.content-section h2 {
  text-align: center;
  margin: 0;
  padding-top: 200px;
}

.sidebar-item {
  text-align: center;
}
.sidebar-item h3 {
  background: gold;
  max-width: 100%;
  margin: 0 auto;
  padding: 50px 0 100px;
  border-bottom: solid 1px #fff;
}

Hopefully, you have successfully completed the Bootstrap 4 sticky sidebar on the scroll.

If the sidebar is not showing, read this article – WordPress Sidebar Missing Fixed (4 Reason)

Conclusion

A sticky sidebar is a great way to increase website revenue. There are two ways to have a ticky sidebar, Coding, and Plugin. There are only three plugins that are capable of ticking a sidebar without hurting your site. While with coding, you can easily build a sticky sidebar.

I hope this post was helpful.

Thank for reading!

Similar posts

How To Check Disk (Server) Usage in WordPress (5 Ways) Size Of Files & Data

(Fixed) DNS Server Not Responding Error (9 Ways) Windows and Mac

Fix a 503 Service Unavailable Error 11 Methods (Screenshots)

Sumit
Sumit

Sumit is a regular contributor to Hostinggrow.com. He has 6 years of experience in blogging, and he loves football, his favorite player is - Lionel Messi (GOAT), but he has no hate for Ronaldo.

Articles: 54

Leave a Reply

Your email address will not be published.