Enrich Your WordPress Knowledge Regularly

How to make Dokan Theme Category Menu Scrollable
Let’s start this article with a quote about flexibility!
“Survival is for those who are flexible; they are smart enough to adapt and they never give up!”
― Noha Alaa El-Din, Norina Luciano
Sometimes, flexibility is needed for a few elements when dealing with designing or crafting your new site. That might be a little thing, but that can be noticeable by the end-user.
If you are starting with your new multi-vendor site using the Dokan plugin, the Dokan Native theme should be your first choice to make your site attractive but straightforward.
However, this theme is fair enough to manage your shop as a starter. But if you are thinking about a complete business e-commerce site, you can choose third-party themes that Dokan supported.
We are now getting to the main point. Once you increase your site product categories, you will notice your categories menu is enlarging with extra Height where right side padding is also growing.

Ops! It’s looking odd!
So how can we make it a flexible and UI-UX-friendly option for the end-user?
Well, these below CSS Snippets (Yes, you hear it right only with the CSS code!) can make this Category Menu fully UI-Friendly. Why not make this category option scroll-able so that the contents remain inside the scroll-able box.
Process
Navigate to your wp-admin –> Appearance –> Customize –> Additional CSS and insert below CSS Codes
/** Make Dokan theme Category/Menu Scroll-able **/
#cat-drop-stack {
height:230px; width:auto;
overflow:hidden; overflow-y:scroll;
}
#cat-drop-stack::-webkit-scrollbar {
-webkit-appearance: none;
width: 7px;
}
#cat-drop-stack::-webkit-scrollbar-thumb {
border-radius: 4px;
background-color: rgba(0,0,0,.5);
-webkit-box-shadow: 0 0 1px rgba(255,255,255,.5);
}
#cat-drop-stack::-webkit-scrollbar-track {
box-shadow: inset 0 0 5px grey;
border-radius: 3px;
}
You will notice the output now with a nice scrollbar box containing the categories inside this.

No worries! This element is also fully responsive, showing the output as expected on mobile phone devices.

Wrapping up
So this is all for now. I hope this will help you a little to polish your new Dokan e-commerce site.