Hai perfettamente ragione, chiedo venia: avrei dovuto specificare in quali pagine si verifica il problema, sapendo bene che non c'è bisogno che ti dica io come cercare un div (ci mancherebbe...).

Seguendo il tuo consiglio di affrontare un problema alla volta, cerchiamo innanzitutto di capire se è opportuna questa variazione di struttura html, sulla base del risultato che vorrei raggiungere.

Per far ciò bisogno partire dal problema che voglio risolvere, proverò a spiegarlo in maniera analitica, senza mettere troppa carne al fuoco.

Torniamo al sito nella versione precedente, senza le ultime modifiche (ho rimesso il tema originale su wordpress).

Se vai in una qualsiasi delle pagine sotto "aree di attività", in versione mobile, noterai che il titolo è graficamente posizionato al centro dell'header.

Se vai in una delle pagine con il titolo più lungo, noterai che, su uno smartphone, il titolo si dispone su due righe.

Questo ovviamente comporta un'aumento della sua altezza, da cui discende che l'elemento sottostante (ovverosia il corpo del testo) risulta più distanziato dall'header rispetto a quanto non accada in una pagina dove il titolo si dispone su una riga soltanto.

Ho pensato che per ovviare a questo problema l'unica soluzione sarebbe stata quella di separare il titolo della pagina dal corpo del testo, in modo che al variare di dimensioni del titolo il corpo del testo non si sposti.

Ho anche pensato che essendo il titolo graficamente posizionato dentro l'header, sarebbe stato forse più coerente porlo all'interno di quell'elemento anche nel codice.

Ora, lo spostamento del titolo all'interno del tag header ha comportato alcune complicazioni con riferimento ai div "overview" e "overview-content".

Questi elementi sono collocati tra il titolo e il corpo del testo (div "wrapper") e sono anch'essi "sovrapposti" all'header, mediante l'uso di un margin-top negativo.

Purtroppo, da quando ho dato position relative all'header, i suddetti div risultano coperti dall'header e pur intervenendo sullo z-index, non sono riuscito a risolvere, con particolare riferimento all'elemento "overview-content".

Ora, senza approfondire ulteriormente quest'ultima problematica, al fine di evitare di porre troppi problemi in contemporanea, mi concentrerò al momento solo sul corretto approccio da adottare, riservandomi di scendere nell'analisi della suddetta problematica tecnica solo all'occorrenza.

In definitiva, ho pensato che le soluzioni potrebbero essere 2:

1) Concentrarsi per cercare di risolvere ii problemi che affliggono di div "overview" e "overview-content" da quando ho dato il position relative all'header.

2) Lasciare tutto com'era e creare una struttura html alternativa solo per la versione mobile, dal momento che nella versione mobile i div "overview" non sono visibili (display: none) e che è solo nella versione mobile che si verifica il problema del titolo che si dispone su due righe, buttando giù il corpo del testo.

Spero di essere stato più chiaro e di aver affrontato gli argomenti senza fare confusione.

Tra i due approcci quale ti sembra migliore?

In generale preferirei avere un unico markup html per desktop e mobile.
Tuttavia, se ciò comporta troppe complicazioni nella versione desktop, affinché i div overview funzionino a dovere, sarei disposto ad adottare anche la seconda soluzione.