Bene, sul mio pc intravedo il problema ma è talmente veloce che quasi non riesco a notarlo. Come tu hai indicato, è relativo alla velocità di connessione o, meglio, al tempo di caricamento dalla pagina stessa.

Ti anticipo che si potrebbe risolvere con l'apporto di qualche regola CSS.

Perché avviene quel problema è presto detto. Il sistema che stai adoperando agisce solo tramite JavaScript per collassare il menu. Quello script viene però eseguito solo quando la pagina risulta pronta, cioè quando gli stessi elementi HTML sono stati letti dal browser e appiccicati sulla pagina (quindi risultano anche già renderizzati, visibili sulla pagina); perché solo da quel momento possono essere manipolati via JavaScript.

La funzione principale di jQuery (che è una libreria JavaScript) si occupa appunto di intercettare l'evento in cui la pagina risulta pronta per la manipolazione via script (tecnicamente chiamato evento ready()).

Nel tuo script è definito con la prima riga:
codice:
jQuery(function () { .... })
In linea di massima questo procedimento è normalmente obbligatorio. Se la pagina però risulta lenta nel caricamento, per la presenza di molti contenuti o per la bassa velocità di connessione o per qualsiasi altro motivo, potrebbe verificarsi appunto questo tipo di problemi.

A differenza di JavaScript, il CSS invece viene definito generalmente in modo preventivo, per cui le regole (in linea di massima) sono lette dal browser prima che avvenga il rendering. Quindi, nel momento in cui gli elementi vengono visualizzati sulla pagina, risulteranno già "formattati" secondo il CSS a loro applicato.

Ora, col CSS si tratta semplicemente di impostare un breakpoint per applicare (preventivamente) il display:none per quell'elemento quando la pagina risulta aperta in modalità mobile. Ovviamente non entro nei dettagli dell'argomento che probabilmente hai già affrontato con quella stessa guida (vedi il capitolo 4).

Nel tuo CSS principale puoi aggiungere una regola del genere:
codice:
@media screen and ( max-width : 750px ) {
   #menu-principale { display: none; }
}
Questo farà in modo che il menu risulti "inizialmente" chiuso quando la larghezza della finestra è massimo 750px. Ovviamente lo script si occuperà poi delle altre interazioni per aprire/chiudere il menu. Le regole applicate via JavaScript (pur essendo sempre regole CSS) sono definite come stile in linea, per cui avranno normalmente priorità rispetto al CSS principale (incluso nella pagina).

Vedi se così si risolve, fai sapere.
Buon proseguimento.