How to make Dokan Theme Category Menu Scrollable

Let’s start this article with a quotes about Flexibility!

Sometimes, flexibility is needed for few elements when you are 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 getting started with your new multi-vendor site by using Dokan plugin then Dokan Native theme should be your first choice to make your site simple but look-attractive.

However, as a starter this theme is fair enough to manage your shop. But if you are thinking about full business e-commerce site then you can choose third-party themes which Dokan supported.

Now getting to the main point. Once you will increase your site product categories. You will notice your categories menu is enlarging with extra height where right side padding also increasing.

Ops! it’s looking odd!

So how can we make it a flexible and UI-UX friendly option for the end-user?

Well, this below CSS Snippets (Yes, you hear it right only with the CSS code!) can simply make this Category Menu fully UI-Friendly. Why not we make this category option as scroll-able so that the contents remain on the inside of 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 which containing the categories inside this.

No worries! this element is also fully responsive so it will also show the output as expected on the mobile phone devices.

Wrapping up

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