Da desktop, il menù diventa come su mobile per uno zoom maggiore di un certo valore

Ciao a tutti,
avrei per favore bisogno di un aiuto per migliorare l'aspetto del mio blog di matematica.
Nel mio blog altramatica.altervista.org, da desktop se imposto uno zoom con la combinazione ctrl + maggiore del 125%, il menù di navigazione in alto diventa come sul telefonino e scompare la sidebar. Questo accade su Opera. La stessa cosa succede su Edge ma per un fattore di zoom oltre il 150%.
Per quanto ho avuto modo di vedere non mi pare ci sia un'opzione modificabile dal pannello di Wordpress.
Avrei bisogno quindi di un codice css aggiuntivo che mi permetta di mantenere il menù su desktop sempre nello stesso formato, a prescindere dallo zoom di visualizzazione impostato dall'utente nel browser. Vorrei che il lay-out non cambiasse anche con caratteri del testo molto più grandi, senza che importi che il menù in alto venga visualizzato anche solo parzialmente.
Ho provato ma senza successo, non riesco ad individuare l'elemento da modificare. Credo si tratti di una regola @media da cambiare, ma quale? :) Il tema in uso è Keith.
Grazie mille in anticipo a chi vorrà aiutarmi. Ciao!

Hai questa classe:
.main-navigation ul {
display: none;
}
che viene sovrascritta da questa:
@media screen and (min-width: 1024px)
.main-navigation ul {
display: flex;
flex-flow: row wrap;
align-items: center;
justify-content: center;
list-style-type: none;
margin: 0;
padding: 0;
}
quando è desktop

Grazie mille per la spiegazione. Il problema è che però da desktop, oltre un certo fattore di zoom mi ritrovo con il menù del mobile. La funzione che mi hai indicato lavora correttamente, infatti sotto i 1024 px viene visualizzato il menù ridotto (come ad esempio sul mio telefonino). Quindi per questo sono a posto.
Il problema che non riesco a risolvere rimane individuare il codice che, pur da desktop, fa di nuovo comparire il menù ridotto - se si supera una certa percentuale di zoom nella visualizzazione del browser.
Ciao! :)

Scusa ma lo style è quello, non esiste uno style per lo zoom, ma uno per la dimensione del viewport. Se vuoi che a 150% si veda ancora esteso basta che cambi quel 1024px con un valore + piccola tipo 800px o se preferisci fare una nuova media query.

Ciao,

ho provato a modificare il valore aggiungendo temporaneamente il codice CSS di prova seguente. Non posso modificare il tema né ho un tema child. In ogni caso, non so il motivo ma anche con questo codice CSS aggiuntivo il comportamento dello zoom è sempre lo stesso. Da desktop, ricompare comunque il menù nel formato ridotto oltre un certo fattore di zoom.

Grazie ancora, ciao!

@media screen and (min-width: 800px)!important;
.main-navigation ul {
display: flex;
flex-flow: row wrap;
align-items: center;
justify-content: center;
list-style-type: none;
margin: 0;
padding: 0;
}

Quel "!important" messo li non è la sintassi corretta, l'important si mette negli attributi, es. display:flex !important;

Ho provato a togliere "!important" da quella posizione e l'ho messo in ciascun attributo ma il risultato pare non cambi.
Grazie ancora, ciao! :)