Magento RWD theme - layered navigation not showing

[hsjvr]

We like the layered navigation on the right side of the category page. Therefore, I inserted following code in our local.xml file:

<catalog_category_default translate="label">
 <reference name="root">
     <action method="setTemplate"><template>page/2columns-right.phtml</template></action>
 </reference>

In my catalog.xml file, I edit this:

<reference name="left_first">
        <block type="catalog/layer_view" name="catalog.leftnav" after="currency" template="catalog/layer/view.phtml">
            ...

to this:

<reference name="right">
        <block type="catalog/layer_view" name="catalog.leftnav" after="currency" template="catalog/layer/view.phtml">
            ...

On large viewports, I see the layered navigation on the right side, as it should be. As soon as I resize the window to a tablet resolution, the layered navigation disappears. Normally, the layered navigation is added on top of all products in the tablet resolution with the label "FILTER".

[davebaker]

Hello there,

You should be able to acheive what you would like by modifying your app.js. Find the following block of code:

  // ==============================================
    // Block collapsing (on smaller viewports)
    // ==============================================

    enquire.register('(max-width: ' + bp.medium + 'px)', {
        setup: function () {
            this.toggleElements = $j(
                // This selects the menu on the My Account and CMS pages
                '.col-left-first .block:not(.block-layered-nav) .block-title, ' +
                    '.col-left-first .block-layered-nav .block-subtitle--filter, ' +
                    '.sidebar:not(.col-left-first) .block .block-title'
            );
        },
        match: function () {
            this.toggleElements.toggleSingle();
        },
        unmatch: function () {
            this.toggleElements.toggleSingle({destruct: true});
        }
    });

• Replace the line:

'.sidebar:not(.col-left-first) .block .block-title'

• With the line: 

'.block-layered-nav .block-subtitle--filter'

• Change the 'match' method to the following:

 match: function () {
	$j('.col-main').prepend($j('.block-layered-nav'));
        this.toggleElements.toggleSingle();
},

• Change the 'unmatch' method to the following:  

 unmatch: function () {
	$j('.col-right').prepend($j('.block-layered-nav'));
        this.toggleElements.toggleSingle({destruct: true});
}

Hopefully that will do the trick!