Bootstrap menu dropdown problems

See more:

WordPress

bootstrap

Hi I need to find a solution for a problem that I have with bootstrap menu.

I'm using wp_bootstrap_navwalker in my WP theme, and I found some solutions on the web to enable more deeper nav, but cant find the solution to work fine on desktop and on smaller devices.

I have this structure of the menu:

http://i.imgur.com/eG7tntJ.jpg


My question is how to enable all menu items, dropdown items and sub dropdown items to be clickable on all devices (on hover on desktop and on click on small devices). I suppose that on small devices there should be some function that lets you to click 2 time to access the link and on 1 click just to enable opening of the sub items.

I currently have this solution, but doesnt quite do what I want: http://stackoverflow.com/questions/21748558/make-parent-menu-clickable

as my sub dropdown items show up in the same time like this:

http://i.imgur.com/GNciykx.png

This is the exact code that I use in header.php and my style.scss :

jsfiddle.net/pevoje/j34j24nr

Any ideas?