How to create a sticky floating sidebar widget in WordPress

As we already know that some website has the sticky widget in the sider on any post which is continuously floating in the sidebar while scrolling a single page. If you also want to place a widget in WordPress sticky sidebar then this post will help you to do the same on your own website.

Here I am sharing, how to create a sticky floating sidebar widget on the WordPress website. Firstly, I want to tell you that there are two methods available for WordPress floating sidebar or WordPress sticky sidebar.

01. Using a WordPress plugin

There are many WordPress plugins present in wordpress but I highly recommended you for only a single WordPress plugin i.e. Q2W3 Fixed Widget Plugin. This plugin is being used on many famous websites. Here we will know how it works and how to use it on a WordPress website.

How to use Q2W3 Fixed Widget Plugin

Click on Add new plugins in the WordPress Dashboard then install and activate the “Q2W3 Fixed Widget” plugin.

Q2W3

Go to Appearance and click, “Fixed Widget Options.”

Fixed Widget Options

Q2W3 Fixed Widget plugin has a few advanced settings you can use to customize the height or width of the floating sticky widget. You can also change compatibility settings for jQuery, logged in users only, or add custom HTML IDs. After making your adjustments, click the “Save Changes” button on the bottom.

Save Changes

Now go to Appearance and click, “Widgets.”

WordPress Widgets

Click on a sidebar widget to expand its settings which you want to fixed in side of the WordPress website.

Sidebar Widget

At the bottom of this widget, you’ll see a new option available. Click the checkbox for “Fixed Widget.”

Fixed Widget

Click the “Save” button.

Save Widget

Now, this widget is a floating widget. When visitors scroll your website, that single widget will remain visible and fixed.

02. Using Sticky sidebar CSS code.

If you do not want to install the above WordPress plugin then you can also use a CSS code for the floating sidebar or sticky sidebar. Now I am sharing the procedure to enable WordPress sticky sidebar for a website.

First set up two divs. One represents the main page content and should extend past the bottom of the screen. The second will be the sidebar, which we’ll make shorter than the length of the screen.

Use the following HTML and CSS:

<div class="wrapper">
  <div class="main">
    Main content
  </div>
  <div class="sidebar">
    Sticky sidebar
  </div>
</div>
.wrapper {
  display: flex;
  justify-content: space-between;
}

.main,
.sidebar {
  border: 3px solid black;
  padding: 15px;
  background-color: #fff;
}

.main {
  width: 60%;
  height: 150vh;
}

.sidebar {
  width: 25%;
  height: 25vh;
}

body {
  background-color: #ccc;
  font-family: sans-serif;
  padding: 10px;
}

Note the heights of the main and sidebar elements are set using the units. 100vh is the height of the current viewport, so setting the height of the main div to 150vh gives it a height that will be 1.5 times that of the screen.

But the sidebar isn’t sticky yet! When you scroll down the page, the sidebar doesn’t follow. All we need to do to fix that is to add two lines of CSS:

.sidebar {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}

Leave a Comment