Adding sticky sidebars to your WordPress site is an outstanding way to improve your website’s navigation. Big websites can become confusing to search through. But when you combine a well developed sticky sidebar with a well developed sticky navbar, you can create a website that links every page on your site to every other page on your site.
Assumptions
This post assumes that you are familiar with WordPress and WordPress themes and that you know how to set up a website. It also assumes that you are familiar with widgets and menus.
Uses for a Sticky Sidebar
There are three primary ways that a sticky sidebar can be utilized:
- Listing Blog Posts for a Blog: The most common place that a sticky sidebar is used is on a blog or news site for the purpose of featuring posts.
- A Table of Contents for a Large Page: Another great use for a sticky sidebar is a table of contents used to define sections of your page.
- Extending Your Navigation Bar: Your users’ computer screens can only provide so much space. You can use the sidebar to add links that you can’t fit into your navbar.
Pick the Right Theme for Adding Sticky Sidebars to Your WordPress Site
You can get everything that you need for adding sticky sidebars to your WordPress site by downloading the Big Media theme. Just go to your WordPress admin center Appearance > Themes > Add New, then type “Big Media” into the search bar.
The reason that the Big Media theme is the ideal theme is that it not only has everything that you need to set up sticky sidebar navigation, it also has all of the complementary navigation necessary such as a sticky navbar, a back to top button, and mobile compatibility.
Adding a Sticky Sidebar with a List of Blog Posts
A classic use case for a sticky sidebar is to use it as a way to display a list of posts for your blog. To accomplish this, all you have to do is go to the customizer of the Big Media theme (from the admin center go to Appearance > Customize), then go to “Sidebar and Footer Blocks”, then go to “Post (Blog) Sidebar 1” and add a Heading block, then go to “Post (Blog) Sidebar 2” and add a latest posts block. By using two sidebars stacked on top of each other, it will cause the heading to stay in a relative position while the latest posts block will continue to stick as you scroll down screen.
Adding a Sticky Sidebar with a Table of Contents
You may have read my previous post about how to build a table of contents without a plugin. This is still an effective way to add a table of contents, but the Big Media theme offers you an even simpler way. You can still follow the old instructions to set all of your page’s anchors; but with the Big Media theme, instead of using a custom html block and additional CSS, you can add your menu as a regular menu through the menu controls in the admin center or the customizer, then you can use the menu controls in the customizer to add your table of contents to your pages, then you can turn off its use on any pages that you don’t want it featured by selecting “no sidebar” in the block editor by selecting the settings gear then select the page tab then select “no sidebar” from the template dropdown. You can also use the “No Sidebar for Static Pages” control in the Layout section of the customizer to turn off the menu on every page but the homepage.
Adding a Sticky Sidebar by Extending the Navigation Menu
If you have a very large navigation menu, then it also isn’t a bad idea to extend your menu into the sidebar so that it doesn’t get squashed on small screens. What you do is create two menus. The first menu is all of the links that go into your navbar. The second menu is for all of the links that go into your sidebar. Once you have done this, go to the menu section of the customizer (or the admin center) and assign the navbar menu to the navbar and the sidebar menu to both of the sidebars. Note that when you do this with the Big Media theme, your navigation menu gets moved into the slide panel for mobile viewports, and the sidebar portion of your extended menu is moved directly under the main navigation menu.
Got Questions About Adding Sticky Sidebars to Your WordPress Site?
If you have any questions, then feel free to post them in the comments below.