Hallo,
wie du schon gemerkt hast, hat die Änderung von absolute auf relative Nebenwirkungen. Versuch mal folgendes:
Leg um die Navi ein div:
<div id="umnavi">
<nav …> … </nav>
</div>
und ergänze das css um
#umnavi { position: relative; height: 3.5em; }
So reservierst du Platz für die Navigation, kannst sie aber beliebig positionieren.
Du musst dich auch noch um das Umschalten von breiter auf schmale Navigation kümmern. Dazu musst du im Script im Bereich
// Auf Seitenbreite reagieren und bei breiten Viewports Klasse "large" setzen
var format;
var mq = window.matchMedia("screen and (min-width:45em)");
mq.addListener(mq_handler);
mq_handler();
die min-width:45em
an deine Bedürfnisse anpassen.
Gruß
Jürgen