Ciao, è buona l'intuizione di ninja72 ma proverei ad aggiustare il tiro magari definendo meglio l'altezza del contenitore (l'elemento #header).
Nel file /themes/Child/assets/css/theme.css la prima regola è:
codice:
#header{
height: 191px;
}
Questo valore viene considerato (in base a diversi fattori) quando l'altezza del suo contenuto va a ridursi ulteriormente; in sostanza, quando header-top risulta essere fixed, e viene quindi tolto dal normale flusso dei contenuti, ciò che segue si posiziona a ridosso di quei 191px.
Il fatto è che l'attuale contenuto di #header non ha esattamente quell'altezza. Oltretutto il suo valore cambia per le varie dimensioni del viewport, in base ai breakpoint definiti per il responsive.
Puoi notare infatti che per viewport piccoli il contenuto della pagina va a coprire la barra del menu (a prescindere dal problema che hai indicato).
Potresti provare quindi a definire meglio il valore di quell'altezza, si nella regola di base sia per gli eventuali breakpoint in cui quel valore non coincide più.
Da qualche prova che ho fatto, come base puoi mettere:
codice:
#header{
height: 230px;
}
modificando quindi il valore di quella stessa regola indicata sopra. Questo dovrebbe andare bene per i vari breakpoint dalla dimensione più bassa fino a 1199px.
Per viewport maggiori si noterebbe comunque uno scatto (anche se in maniera più lieve rispetto a quello attuale), per cui puoi definire quell'altezza in questo modo:
codice:
@media (min-width: 1200px) {
#header { height: 252px; }
}
Prova e fai sapere.
Ovviamente, nel caso in cui vai a modificare gli elementi dentro #header e questi influiscono sulla sua altezza, dovrai ridefinire opportunamente questo valore.