Block Content set to "no-display" on smaller screens

Question

I have been working on a site and noticed that some blocks disappear when I resize the screen. A closer look at the code shows that at a certain size, the class "no-display" has been added to the div, making the css set the display to none.

Any idea where this is coming from?

Here is my site:

http://greenlivingaustralia.com.au/shop

I am using the rwd theme with a few minor tweaks, including the Codnitive Sidebar Navigation Menu Professional extension to move my menu from the top to the left sidebar.

The sidebar menu was disappearing altogether when the screen size was below 770px. I have removed the style definition for "no-display" for now but that is not a permanent fix.

Answer 1

The no-display class is being added by the jQuery.toggleSingle plugin that is defined inside of the skin/frontend/green/default/js/app.js file.

That plugin is designed to collapse blocks on small screens and allow them to be activated by clicking the title of that block. For example, go to this RWD demo theme category and make your browser narrow. You will see at the left navigation collapses under a "Filter" header:

If you search the app.js file for "toggleSingle", you will see this section of JavaScript:

// ==============================================
// 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});
    }
});

The code above is what determines which blocks should collapse on small screens. If you want prevent the menu on your homepage from being collapsed, you should change the code inside the "setup" function to:

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'
);

By the way, if you want to figure out which JavaScript is modifying the DOM, you can do so using Chrome DevTools "DOM Modification" breakpoints: https://developer.chrome.com/devtools/docs/tips-and-tricks#debug-dom-modifications So in this case, you would have set a "Break On… Attributes Modification" on your ".sidebar-nav-left .block-content" element, and then when you resized the window, you could have looked at the Call Stack to see what JavaScript was adding the "no-display" class: