Seitenaufbau

Auf unserer Webseite zeigen wir

• oben links: Das DP-Logo
• oben rechts: Das DP-Motto
• darunter: Das Navigationsmenü
• darunter: Den Nutzinhalt
• rechts: Den Scrollbalken (… falls der Nutzinhalt nicht auf den Bildschirm passt)

Bisheriges Verhalten

Wenn der Nutzinhalt nicht auf den Bildschirm passt und man nach unten scrollt, dann verschwinden DP-Logo, DP-Motto und Navigationsmenü.

Wunschverhalten

Das Navigationsmenü soll immer sichtbar bleiben!

Umsetzung

Die Umsetzung erfolgt mit CSS. Es muß das Styling für die Navigationsleiste angepasst werden:

• position – bislang:relative, künftig:sticky
• top – neu:0px
• z-index – neu:10

Hier die Änderungen im Detail:

1
2
3
4
5
6
7
8
9
10
11
12
13

diff --git a/sass/partials/_navigation.scss b/sass/partials/_navigation.scss
index 30fa011..fec8061 100644
--- a/sass/partials/_navigation.scss
+++ b/sass/partials/_navigation.scss
@@ -1,5 +1,7 @@
 body > nav {
-  position: relative;
+  position: sticky;
+  top: 0px;
+  z-index: 10;
   background-color: $nav-bg;
   @include background($nav-bg-front, $nav-bg-back);
   border: {

Probleme

Navigationsmenü verschwindet beim Scrollen

Beschreibung

Die in diesem Dokument beschriebene Änderung funktioniert überhaupt nicht, das Navigationsmenü verschwindet beim Scrollen nach oben außerhalb des Bildschirms!

Analyse

Die zugehörige CSS-Datei ist im Browser-Cache und wird nicht immer sofort aktualisiert!

Abhilfe

Link /stylesheets/screen.css im Browser öffnen und “F5 – Refresh” betätigen!

Quellen

• Halb feststehende Bereiche… von Florence Maurice