PHPMatters Help You Better Hosting Your PHP-based Sites
How to Make a Sticky Floating Sidebar & Navigation Menu in WordPress

How to Make a Sticky Floating Sidebar & Navigation Menu in WordPress

As you may notice, there are more or less sticky elements that always float along with the drop-down screen on most of the websites. Usually, they come in various forms, such as sticky sidebar, floating sharing buttons, sticky footer bar and floating navigation menu, etc. As a matter of course, those floating and sticky objects will appeal to visitors’ attentions and eyes so as to increase conversion rate for better website traffic.

Here, we would like to guide you how to build the mentioned sticky floating sidebar and navigation menu on your WordPress site. For a start, we will introduce how to make a floating sidebar in WordPress by using a hassle-free WordPress plugin named as Q2W3 Fixed Widget. Drop down and learn more useful practices.

What Is Q2W3 Fixed Widget?

As a long-awaited WordPress plugin, Q2W3 Fixed Widget allows you to display your selected floating widgets on a WordPress site. Besides that, this lightweight plugin enables you to “Fix” and “Stick” multiple widgets located in different areas of sidebars. More importantly, it supports multiple languages, including Russian, Spanish, English and French, etc.

As for system requirement, this Q2W3 Fixed Widget plugin is compatible with WordPress v3.3 or higher versions. However, this plugin cannot work with many popular WP themes, and it requires wp_head function in header.php file and wp_footer function in footer.php file. More than that, it requires no JavaScript errors caused by other scripts and plugins.

Website URL: https://wordpress.org/plugins/q2w3-fixed-widget/

WordPress Floating Sidebar - Q2W3 Fixed Widget

How to Make a Sticky Floating Sidebar Widget in WordPress?

To make a sticky floating sidebar has been much easier with the help of the mentioned Q2W3 Fixed Widget. Now, let’s see more details in the following parts.

Install & Activate this WP Plugin
To do so, you are required to login to the WordPress dashboard and go to “Plugins” > “Add New.” If done, search this “Q2W3 Fixed Widget” plugin in the right-hand “Search Plugins” box and then make a hit on the “Install Now” button. As you might suspect, you will be prompted to “Activate” this newly-installed plugin as is showed below.

WordPress Floating Sidebar - Install & Activate this WP Plugin

If done correctly, you will be automatically switched to the “Installed Plugins” page where you can see this newly-added “Q2W3 Fixed Widget” plugin. Till this step, you have already done with the installation and activation of this WP plugin. Of course, you can choose to download this “Q2W3 Fixed Widget” plugin and upload it from the local computer manually on condition that you are quite familiar with how to install plugins.

Customize Fixed Widget Options
Once installed and activated, you will need to head over to “Appearance” > “Fixed Widget Options” so as to make some personalized settings. As is displayed in the following screenshot, you will be asked to specify “Margin Top”, “Margin Bottom”, “Refresh interval” and ”Screen Max Width” in the “General Options” area.

WordPress Floating Sidebar - Fixed Widget Options

In the meantime, you are also allowed to “Inherit widget width from the parent container” if your existing theme is responsive enough. Also, you can choose “Use jQuery hook” option if you encounter some problems with the scroll-oriented JavaScript code. By the way, you are able to fix widget ID automatically and decide the “widget_display_callback hook priority.”

Note: If required, you will be able to specify “Custom IDs” and seek “Support Forums” for help. At last, don’t forget to click “Save Changes” to take effect.

Display Widgets on Your WordPress Site
Having done with those essential settings, you should hover to “Appearance” > “Widgets.” As you might notice, there are many “Available Widgets” that are ready to be added to your navigation menus. More importantly, you are allowed to make any widget sticky and floating by simply clicking on the “Fixed Widget” option at the bottom of each widget. Undoubtedly, you can choose to “Delete” and “Close” the chosen widget based on personal needs and indulgences.

WordPress Floating Sidebar - Display Widgets in WordPress

Important to Note: You can make full use of those sticky sidebars to promote online products, increase newsletter signups and showcase some social widgets. However, it is inadvisable to make your Google Adsense ads sticky in the sidebar and display too many sidebar widgets on your page, which will affect your website traffic in a negative way.

How to Create a Sticky Floating Navigation Menu in WordPress?

By all accounts, a fixed and floating navigation menu enables your readers to scan your WordPress site easily without having to scroll back to the top. Here, we would like to share a quick and simple way to add a sticky navigation menu in WordPress with you. That is to say, we will show you how to create a scrollable navigation menu by using a useful WP plugin – LowerMedia Sticky.js Menus.

About LowerMedia Sticky.js Menus
Based on “Sticky.js” script, “LowerMedia Sticky.js Menus” empowers you to insert sticky menus, headers and widgets, etc. In another word, this user-oriented plugin makes your own header or primary navigation menu sticky by integrating with the “Sticky.js” script language. Plus, it also allows you to make any HTML objects fixed through related plugin settings.

Apart from that, “LowerMedia Sticky.js Menus” so far has been tested on a good number of commonly-used themes, such as Twenty Eleven, Twenty Twelve, Twenty Thirteen, Twenty Fourteen, Neuro and Responsive, etc. Instead of embedding a class, this customizable plugin requires custom js files that include some defined navigation selectors. It is well-maintained with regular updates.

Website URL: https://wordpress.org/plugins/lowermedia-sticky-js-menus/

WordPress Floating Sidebar - About LowerMedia Sticky.js Menus

Enable LowerMedia Sticky.js Menus in WordPress
As is described above, you should firstly enable this “LowerMedia Sticky.js Menus” in WordPress. To do this, you only need to “Install” and “Activate” this plugin on the dashboard of WordPress. In the following “Installed Plugins” page, it is obvious that there are four selectable options under the name of “LowerMedia Sticky.js Menus”, including “Settings”, “Set Menu”, “Deactivate” and “Edit.”

WordPress Floating Sidebar - Enable LowerMedia Sticky.js Menus

Customize LowerMedia Sticky.js Settings
Here, all you need to do is to click on “Settings” option in order to customize menu settings. To be more specific, you will need to define “Sticky Object” and create “Additional Sticky Object” by filling in the unique ID and class of a menu. In the meantime, you can also hide sticky effect on small screens or mobile devices through limiting the screen width.

WordPress Floating Sidebar - Customize LowerMedia Sticky.js Settings

Having done with those necessary settings, you will need to “Save Changes” to put your sticky floating navigation menu onto your site.

Note: Also, you can click the “Set Menu” link to manage and create a navigation menu directly. If you happen to use “Genesis framework” theme, you can make use of another WP plugin named as “Genesis Sticky Menu” to add a floating and sticky menu.

WordPress Floating Sidebar - Set Menu Options