How to make Archive dropdown list wider if there is more than 4 items. Only for desktop visitors.

Hello all,

could you please help me to solve the issue with Archive dropdown list. 
I would like to make the list wider once the column (number of items in column) is bigger than 4.
So if there would be 12 items, list would have 3 columns (4 items in each).

Here is URL: https://www.slovakspots.com/bratislava-accommodation-1
Password: Ulicajekrasnydom

Thank you very much in advance. 🙂 

@Beyondspace In first place, thank you for your help!
Your approach is good, but I would rather inject code which could expand the dropwdown list based on number of items within dropdown. 

Would it be possible to create code which would be not linked to specific Archive? But it could be used for all archives within my website?

I am planning to have more blogs which would utilise same framework. 🙂 

 

@Beyondspace I agree it's great initial solution, which could be used once I would fit the number of the categories ahead, to fit the size of expanded dropdown list. 

Yes currently our website is on Business plan.

@Beyondspace thank you! I tried new version of your code.

But there is the issue with the wide of the each column within dropdown list as you can seen on screenshots below. If there is longer name, it cause the issue and name is split into the two rows.