Buongiorno ragazzi

Sono alle prese con un grosso scoglio, premetto che sono le prime volte che cerco di ottenere questo risultato. Ho un problema con la creazione di un toggle menu per Tablet e Smartphones. Per ora ho agito senza successo la logica di svariati tutorial di Youtube:

Ho cercato l'immagine del menu toggle su Internet e l'ho inserita nella struttura Html del mio sito rendendolo un link <a href="#" class="toggle-nav"><img src=""></a> prima del menu classico <ul id="nav"><li></li>...........</ul>.

Nel Css oltre alla formattazione in se dell'elemento toggle( width e height) l'ho reso invisibile nella risoluzione per lo schermo (.toggle-nav{display:none}) e tramite una media query ho fatto in modo che appaia in dispositivi tablet e smartphones sostituendosi al menu classico (#nav{display:none} .toggle-nav{display:block}).

Infine ho utilizzato jquery per fare in modo che cliccando sul toggle appaia il menu.
$(document).ready(function(){
$('.toggle-nav').click(function(){
$('#nav').slideToggle();
)};
});



Evidentemente mi sfugge qualcosa, poiché non ho ottenuto alcun risultato potete aiutarmi?

Grazie