Return to Top and Sticky Navigation example customizations



When working with long lists i scroll down a lot. And the main nav bar also scrolls away.

Can you make the nav bar sticky?

And introduce a "Go to Top" that pops up on the bottom right corner when scrolling down?


You can but the simplest solution is to limit your results per page to something manageable in your backend settings.  

Otherwise - Remember you can use your Custom CSS and Custom JS sections in the Backend Settings to make all sorts of modifications,  and having a working knowledge of both will be to your benefit with these kinds of things.

Here's some example code for these items...

Sticky bar, clone and overlay it...


.new-toolbar {
.pure-toggle-label {
   z-index: 1000;
   position: fixed;

if you want the sidebar fixed, simple css....

.pure-drawer {

position: fixed;


In the file assets/js/frontend.js you'll need to wrap a function in a window load function so about line 100 to 157 needs to be wrapped.

$(window).load(function() {

// lines 100 to 157 (depending on what's changed in the plugin) go in here... its the /*Select search lists*/ section


Then you can add the following js to the custom js section...

jQuery(function ($) {
    /* clone toolbar */
    $(document).ready( function() {
        var $toolbar = $('.wcp-toolbar').clone(true);

Return to top button link


/* scroll top */
a.back-to-top {
    display: none;
    width: 60px;
    height: 60px;
        line-height: 60px;
    position: fixed;
    z-index: 999;
    right: 20px;
    bottom: 20px;
        color: #fff;
    background-color: #27AE61;
    border-radius: 5px;


jQuery(function ($) {
    $('body').prepend('<a href="#" class="back-to-top">Top</a>');

    var amountScrolled = 300;

    $(window).scroll(function() {
    if ( $(window).scrollTop() > amountScrolled ) {
    } else {

    $('a.back-to-top').click(function() {
    $('html, body').animate({
        scrollTop: 0
    }, 700);
    return false;