So stellen Sie das kollabierbare Untermenü nur im minimierten Menü ein (aka auf mobilen Geräten)

Question

Hallo allerseits und vielen Dank für das Lesen!

Ich versuche aber andernfalls zu bekommen, was ich will, ich habe diese navbar:

code 

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

und ich versuche, herauszufinden, wie das Untermenü „yogastyles“ make a zu sein zusammenklappbares Menü bei der Anzeige auf mobilen Geräten?

Wenn Sie auf einem Telefon (eingeklappte Navigationsleiste) klicken, können Sie nicht auf das Untermenü "yogastyles" zugreifen, da der Klick des übergeordneten Menüs Sie auf eine Seite bringt.

Ich weiß über Medienabfragen, aber ich habe keine Ahnung, wie man das vollständig erreicht, ich habe ein js Skript, das & hinzufügt, entfernt eine Klasse, aber ich kann es nicht zusammen mit dem erreichbaren Untermenü ich habe bereits ...

Ich hoffe, ich habe es genug klemmen, fragen Sie weg, wenn nicht.

Mit freundlichen Grüßen!

Answer 1

Ich kann nicht auf dem Desktop sehen yogastyles entweder

EDIT: Ich sah es vorbei. .dropdown-content hat einen halbtransparenten Hintergrund, der es schwer macht zu sehen. Versuchen Sie, eine Medienabfrage wie

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