Versuche doch bitte mal, ob sich dein Problem verbessert, wenn du in der navi.css / Zeile 11 und Zeile 12 durch folgenden CSS Code ersetzen
.sticky-top-ie {
position: sticky;
z-index:99;
width:100%;
top: 9px;
}
.nav {
font-family: 'Bree Serif', serif;
color: #BEA096;
font-weight: bold;
padding: 0 ; margin: 0;
top: 35px;
margin-left: 0;
z-index: 100;
display: table;
}
Alles anzeigen
Des weiteren hast du in der '@media screen and (min-width: 768px)' nochmal eine Formatierung für '.nav' drin... die solltest du ersatzlos löschen!
Und dann ist da noch das/ die vielen Formate für 'nav > .wrapper-rand'... du brauchst nur eines:
.nav > .wrapper-rand {
margin-top: 0px !important;
}
Und wenn du dazu noch die Formatierungen für 'nav > .wrapper-rand' in den diversen @media Queries löscht, dann kannst du das '!important' in obigen Code sogar weglassen!
Bitte einfach mal testen.. schauen, ob es irgendwelche unerwünschten Nebenwirkungen gibt und wenn es nicht klappt, dann kannst du die Änderungen ja wieder rückgängig machen und den alten Zustand wiederherstellen.
PS: Das Format 'sticky' funktioniert nur in HTML5 fähigen Browsern! Die ganze IE Familie kann das nicht.
Das kann dann zu etwas seltsamen Erscheinungen beim betrachten der Seite zB im IE11 (und älter) führen, denn 'fixed' versteht der und das 'sticky'-Element wandert beim scrollen darüber weg ins Nirwana!