Creating the Sticky Sidebar

In this article, I’ll show you how to create the classic sticky sidebar. This is useful if you’ve got a simple sidebar with not many widgets, that you’d like to keep the website visitor engaged with as they scroll down the page.

Note: The approach taken in this article will unfortuantely not work if you’re using the desktop side panel feature (see screenshot).

As you probably know, the Theme Blvd framework already comes equipped with Bootstrap. What you might not know, though, is that Bootstrap has a feature called “Affix” that we can use here. Here’s the full documentation for this feature:

Now, this method isn’t perfect, but we can make it work. And the beauty here is that we don’t have to include some other big JavaScript or jQuery script for creating this feature, and adding more weight to the load of our website.

Prep: Figuring Out the Numbers

Our first step in this process is to determine some numbers and do some simple math. We need to determine the following pixel values:

  1. Distance: The initial distance from top of website to first widget.
  2. Top Position: Position of the sidebar from top of viewport, after user has scrolled down the page and the sidebar sticks.
  3. Offset: The position in the website where the sidebar will actually stick.
  4. Sidebar Width (large desktops): The width of the sidebar when the viewport is 1200px or above.
  5. Sidebar Width (small desktops): The width of the sidebar when the viewport is 992px to 1199px or above.

These values will be different, depending on which theme you’re using and how you’ve set it up. In the examples and screenshots in this tutorial, I’m using the Jump Start theme, and I’ve got the Super User theme base selected, with all default, initial settings.


This distance can be a little tricky to calculate. — If you’re using your browser’s developer inspector, you may have to add some different elements together. Or for me, I like to cheat; I just take a screenshot, open up in Photoshop, make a selection of the area, and measure it that way. Another way would just be to fudge all the numbers later when we implement the code (but this may take a lot of annoying trial and error).

Top Position

By default, your top position is going to be 0, but most likely this isn’t going to look as nice as giving a little extra space. This space can vary, though, depending on if you’ve got the sticky menu enabled or not, from your theme options page.

In my example here, I’ve got the sticky menu enabled. So I used my web browser’s developer inspector to determine the sticky menu is 48px in height. And then I added 12px more for some extra space below that, and to have a nice round number.

So, we end up with 60px for our top position.

Calculate Your Offset

Now that we know the distance and top position, we need to do some grade-school math. We need to determine the offset of our sticky sidebar. Basically, this offset is the point where we want the sidebar to stick, and we can determine it with the following formula:

Distance - Top Position = Offset

So if I plug in the values for my specific setup into this formula, I get 230px for my offset.

290px - 60px = 230px

Sidebar Width

As described in Bootstrap docs, we must designate a specific width for the fixed position elements. So, we’ll need to determine the width of our sidebar.

In the case of our Theme Blvd theme, we’re only going to be adding this feature to desktop viewports. So, we’ll need to determine the width of widgets for both large desktops and small desktops.

First, we need to figure out the width of the sidebar when the viewport is 1200px or above (large desktops). In the screenshot below, I’ve done this in my Chrome inspector. Rounding up to the nearest pixel, I’ve come up with 364px.

Then, we need to do the same thing, for when the viewport is anywhere between 992px and 1199px (small desktops). So, again I do this in Chrome’s inspector in the screenshot below, and I get 294px, after rounding up to the nearest pixel.

Implementation: Adding the Code

After our prep work, I’ve determined the following values for my setup:

  1. Distance: 290px
  2. Top Position: 60px
  3. Offset: 230px
  4. Sidebar Width (large desktops): 364px
  5. Sidebar Width (small desktops): 294px

Add the HTML

In order to use the Bootstrap Affix data attributes, we need to sneak in some HTML markup, to wrap our sidebar. We’ll utilize the theme’s action hooks, themeblvd_fixed_sidebar_before and themeblvd_fixed_sidebar_after. You’ll add the following to your child theme’s functions.php.

 * Add opening affix DIV tag.
function my_affix_top() {
	echo '<div data-spy="affix" data-offset-top="230" class="affix-sidebar">';
add_action('themeblvd_fixed_sidebar_before', 'my_affix_top', 15);

 * Add closing affix DIV tag.
function my_affix_bottom() {
	echo '</div><!-- .affix (end) -->';
add_action('themeblvd_fixed_sidebar_after', 'my_affix_bottom', 5);

In the above code, notice I’m using data-offset-top="230". That value will be the offset you calculated earlier.

Add the CSS

Next, you’ll need to add some basic styling for the sidebar to accommodate Bootstrap’s affix feature. Add the following CSS to your child theme’s style.css, replacing the top position and widget width values with your own.

@media (min-width: 992px) { /* 992px and above */
    .affix-sidebar.affix {
        top: 60px; /* Top Position */
        width: 294px; /* Widget Width (small desktop) */
@media (min-width: 1200px) { /* 1200px and above */
    .affix-sidebar.affix {
        width: 364px; /* Widget Width (large desktop) */
@media (max-width: 991px) { /* 991px and below */
    .affix-sidebar.affix {
        position: static;