How to set collapsable submenu only on collapsed menu (aka on mobile devices)

Hello everyone and thank you for reading this !

I am trying but failing to get what i want, i have this navbar:

code

https://jsfiddle.net/x4mcq4h7/17/

and i am trying to figure out how can make the submenu "yogastyles" to be a collapsable menu when viewed on mobile devices ?

When viewed on a phone (collapsed navbar) you can't access the submenu "yogastyles" since the parent menu's click brings you to a page.

I know about media queries but i have no idea how to totally achieve this, i have a js script that adds & removes a class but i can't make it work together with the hoverable submenu i already have ...

I hope i made it cleat enough, ask away if not.

Kind regards !

Solution

I can't view yogastyles on desktop either

EDIT: I looked it over. .dropdown-content has a semi-transparent background which makes it hard to see. Try giving a media query like

@media (max-width: 767px) {
    .dropdown-content {
        background: #fff;
    }
}