Feature Requests

Request to Enable Scrolling for .wd-side-hidden (Mobile Compatibility & Hover Issue)
I'm writing to request assistance with enabling scrolling for the .wd-side-hidden element on our site. Although I’ve already added CSS for scrolling, it's not working as expected—especially on mobile devices. The layout is breaking, and elements aren't positioned correctly. Additionally, after implementing scrolling in the middle section of .side-hidden, the hover functionality has stopped working. The .side-hidden design consists of two sections: Main category window Sub-category window I've configured it so that scrolling should appear only when someone hovers over "All Categories", but this feature isn't functioning properly. Could you please help review the code and assist with enabling smooth, responsive scrolling—particularly for mobile—and ensure hover functionality remains intact? / Enable scrolling for off-canvas sidebar and category list / .widget_product_categories .product-categories, .wd-nav-vertical { max-height: 80vh; / Adjust to fit viewport / overflow-y: auto; / Enable vertical scrolling / overflow-x: hidden; / Prevent horizontal overflow / scrollbar-width: none; / Hide scrollbar by default in Firefox / } / Hide scrollbar by default for WebKit browsers / .widget_product_categories .product-categories::-webkit-scrollbar, .wd-nav-vertical::-webkit-scrollbar { width: 0; / Hide scrollbar / background: transparent; } / Show scrollbar on hover for WebKit browsers / .widget_product_categories .product-categories:hover::-webkit-scrollbar, .wd-nav-vertical:hover::-webkit-scrollbar { width: 8px; / Show scrollbar / } .widget_product_categories .product-categories:hover::-webkit-scrollbar-track, .wd-nav-vertical:hover::-webkit-scrollbar-track { background: #f5f5f5; / Replace with your track color / } .widget_product_categories .product-categories:hover::-webkit-scrollbar-thumb, .wd-nav-vertical:hover::-webkit-scrollbar-thumb { background: #888; / Scrollbar thumb color / border-radius: 4px; / Optional: rounded corners / } / Show scrollbar on hover for Firefox / .widget_product_categories .product-categories:hover, .wd-nav-vertical:hover { scrollbar-width: thin; / Show thin scrollbar / } / Support sidebar hover animation / .wd-side-hidden { transition: transform 0.3s ease; / Removed visibility from transition / transform: translateX(-100%); / Adjust for left sidebar / visibility: hidden; pointer-events: none; } .wd-side-hidden.wd-opened { transform: translateX(0); visibility: visible; pointer-events: auto; z-index: 9999; } / Style hover trigger / .wd-off-canvas-btn, .wd-nav-opener { cursor: pointer; transition: background 0.2s ease; display: block; pointer-events: auto; } .wd-off-canvas-btn:hover, .wd-nav-opener:hover { background: #f0f0f0; } / Mobile adjustments / @media (max-width: 767px) { .widget_product_categories .product-categories, .wd-nav-vertical { max-height: 60vh; scrollbar-width: thin; / Always show on mobile for touch / } / Ensure WebKit scrollbars are visible on mobile / .widget_product_categories .product-categories::-webkit-scrollbar, .wd-nav-vertical::-webkit-scrollbar { width: 8px; } .widget_product_categories .product-categories::-webkit-scrollbar-track, .wd-nav-vertical::-webkit-scrollbar-track { background: #f5f5f5; } .widget_product_categories .product-categories::-webkit-scrollbar-thumb, .wd-nav-vertical::-webkit-scrollbar-thumb { background: #888; border-radius: 4px; } }
0
Load More