Mobiles menu Startseite funktioniert nicht

Es liegt an deinem Custom CSS. Durch das top:150px bei der Klasse .site-branding wird der Button "verdeckt" und kann nicht mehr geklickt werden.

Bin mir jetzt nicht sicher, ob ich deine Frage richtig verstanden habe - außerdem werden in deinem Header einige CSS Formate mit JavaScript 'angepasst' - aber vielleicht kommt der folgende CSS Code (in das zusätzliche CSS) deinen Vorstellungen näher:
.has-header-image.twentyseventeen-front-page .site-branding {
top: 10px;
bottom: auto;
vertical-align: top;
padding: 0px;
}

Ja - das weiß ich! Ist aber etwas kompliziert, denn die Schriftgröße wird (möglicherweise) an mehreren Stellen, je nach aktueller Displaygröße, in sogenannten MediaQueries (https://wiki.selfhtml.org/wiki/CSS/Media_Queries) festgelegt.
Was auch immer du da machst, achte dann darauf, dass du passend zum jeweiligen Anzeigegerät ggf die Schriftgröße in so einer MediaQuery anpassen musst.
Wenn du mal mit der rechte Maustaste auf diesen 'Untertitel' klickst und dann in dem aufpoppenden Kontextmenü den Punkt 'Element untersuchen' (kann je nach Browser auch anders heißen) aufrufst, dann wirst du feststellen, dass das fragliche Element '<p class="site-description">Shingon Reiki – Schamanische Geistheilung – Spirituelle Lebensberatung</p> ist und dass dieses derzeit mit einer Schriftgröße von 'font-size: 1.2rem;' formatiert ist - achte auf die MediaQuery - z.B ....@screen and (min-width: 48em).

Im zusätzlichen CSS kannst du dann für die jeweilige Bildschirmgröße:
Media scree and (min-width: xxx) {

p.site-description {
font-size: deine Größe;
}

}
das von dir gewünschte Format einstellen.

Möglich wäre das schon, du könntest über 'nth-of-type(x)' Selector dem dritten und vierten Listenelement ein 'display: block;' zuweisen und dann den linken Rans mit 'margin-left: ?px;' so vergößern, dass die Elemente wieder untereinander sind
... aber ganz ehrlich - das kann nicht dein Ernst sein! Kann ich dir mit gutem Gewissen nicht empfehlen das umzusetzen. Habe das gerade mal getestet und das sieht besch.. aus, die einzelnen Pop-unders behindern sich gegenseitig und das müsste auch für jede einzelne Displaybreite neu angepasst werden.
Hast du nicht eine bessere Idee und kannst das dann zur besseren Visualisierung als Bild erstellen. Vor allem, erwähne auch, für welches Display diese Umstellung sein soll? .. nur Handy?

Deine jetzige Idee kannst du ja selber mal testen - füge mal probehalber folgendes in dein zusätzliches CSS ein... anschauen und gleich wieder löschen... das willst du deinen Besuchern bestimmt nicht antun!

.main-navigation li:nth-of-type(3), .main-navigation li:nth-of-type(4) {
    margin-left:8.5em;
    display: block;
    }