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!
Papathemes
Comments