Start a conversation

Masonry sub-categories

In some case, your sub-categories don't have child categories, it's a reason cause the space between inside column.

So to avoid the space inside a column, add the below CSS to your Footer Script (Admin panel > Storefront > Footer Script)

<script>
    (function () {
        function addEvent(object, type, callback) {
            if (object === null || typeof (object) === 'undefined') return;

            if (object.addEventListener) {
                object.addEventListener(type, callback, false);
            } else if (object.attachEvent) {
                object.attachEvent('on' + type, callback);
            } else {
                object['on' + type] = callback;
            }
        }

        function triggerEvent(object, type) {
            if (object === null || typeof (object) === 'undefined') return;

            var event;

            if (window.CustomEvent) {
                event = new CustomEvent(type);
            } else {
                event = document.createEvent('CustomEvent');
                event.initCustomEvent(type, true, true);
            }
            object.dispatchEvent(event);
        }

        function initMasonry(object, options) {
            return new Masonry(object, options)
        }

        addEvent(window, 'load', function () {
            var script = document.createElement('script');

            script.onload = function () {
                var menuDropdowns = document.querySelectorAll('.emthemesModez-verticalCategories .navPage-subMenu-list');

                for (var i in menuDropdowns) {
                    if (typeof menuDropdowns[i] === 'object') {
                        (function () {
                            var menuDropdown = menuDropdowns[i];
                            var msnry = null;
                            addEvent(window, 'resize', function () {
                                if (msnry && window.innerWidth <= 800) {
                                    msnry.destroy();
                                    msnry = null;
                                } else if (!msnry && window.innerWidth > 800) {
                                    msnry = initMasonry(menuDropdown, {
                                        columnWidth: 33,
                                        gutter: 0,
                                        percentPosition: true
                                    });
                                }
                            });

                            triggerEvent(window, 'resize');
                        })();
                    }
                }
            };

            script.src = 'https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js';

            document.getElementsByTagName('body')[0].appendChild(script);
        });
    })();
</script>
<style>
    @media (min-width: 801px) {
        .emthemesModez-verticalCategories.is-open:not(.emthemesModez-verticalCategories--open) {
            display: block;
            visibility: hidden;
        }
        .emthemesModez-navPages-verticalCategories-container:focus .emthemesModez-verticalCategories.is-open, .emthemesModez-navPages-verticalCategories-container:hover .emthemesModez-verticalCategories.is-open {
            visibility: visible;
        }
        .emthemesModez-verticalCategories .navPage-subMenu.is-open {
            display: block;
            visibility: hidden;
        }

        .emthemesModez-verticalCategories .navPages-item:hover .navPage-subMenu.is-open {
            visibility: visible;
        }

        .emthemesModez-verticalCategories .navPage-subMenu-item {
            width: 31%;
        }
    }
</style>

It looks better right now!

Choose files or drag and drop files
Was this article helpful?
Yes
No
  1. Papathemes

  2. Posted
  3. Updated

Comments