Navigation auf mobile devices völlig verschoben

Du hast ja viele style Angaben der Navigation von twentyeleven angepasst (im speziellen meine ich die positionierunges Angaben -> nach rechts verschoben, höhenposition etc). Im prinzip wird es auf beiden Devices auch gleich angezeigt -> das ipad ist nur breiter, sodass mehrere menüpunkte noch nebeneinander platz haben bevor eine neue "Zeile" angefangen wird. Das s2 hat viel weniger platz sodass für jeden punkt eine neue zeile angefangen wird.
Prinzipiell ist es immer viel arbeit/schwer positionierungs- und grössenangaben bei einem responsiven Theme zu verändern -> man muss da schritt für schritt vorgehen und immer das ergebnis auf verschiedenen devices überprüfen.
Ohne jetzt genau geschaut zu haben -> ein "fehler" dürfte vermutlich sein, dass du px anstatt % verwendet hast.
Ich kenne mich jetzt leider nicht mit dem twentyeleven aus und weiss nicht wie die responsive eigenschaft umgesetzt ist (fluid oder mediaqueries) und auch nicht wie das menü sich verändert, daher kann ich dir nur diese hinweise geben.

LG

PS: zusätzlich dürftest du vermutlich für die menüpunkte ein "position: absolut;" verwendet haben, sodass selbige aus dem elementfluss herausgenommen sind und jetzt die seite "überlagern".

Es beginnt in der style.css wohl mit:

#access li {
        float: left;
        position: relative;
}

Wobei dann aber der Abstand mit Top noch einmal für jedes li-Element geregelt wird, um diesen leichten Bogen darzustellen.

#menu-item-200 { top: 0px;
margin-right: 15px; }
#menu-item-348 { top: -2px;
margin-right: 15px; }
#menu-item-196 { top: 0px;
margin-right: 15px; }
#menu-item-197 { top: 3px;
margin-right: 15px; }
#menu-item-176 { top: 12px;
margin-right: 15px; }
#menu-item-175 { top: 20px;
margin-right: 15px; }

Nachteil, wenn die Media Queries griefen, die unter

/* =Responsive Structure
----------------------------------------------- */


@media (max-width: 800px) {

beginnen und für verschiedene Weiten ausgelegt sind,

@media (max-width: 650px) {
...
@media (max-width: 450px) {

so wird der Platzbedarf für float: left von #access li vermutlich zu gering und die Liste wird in Abhängigkeit vom zur Verfügung stehenden Platz umgebrochen. Wenn Du kein Experte in Sachen CSS bist, so solltest Du Dir einen suchen.

Im Übrigen scheint die Seite nicht abwärtskompatibel zu sein, versagt zumindest im IE Kompatibilitätsmodus beinahe komplett.