Contao Opensauce Template und Sticky Navigation (jQuery plugin)

[Miguel]

Hallo zusammen,

ich nutze Opensauce von Rocksolid als Basis für einen Homepageaufbau und habe das jQuery plugin "Sticky" eingebaut und damit den "main-navigation-wrapper" fixiert. Die Fixierung der horizontalen Hauptnavigation funktioniert, aber wenn ich herunterscrolle, schrumpft die Navigationsleiste auf die für die Links benötigte Breite zusammen. Wie kann ich bewirken, dass die Navigation beim Herunterscrollen ihre Breite beibehält?

Danke im Voraus für eure Tipps.

[Thoni]

Ich kenne mich mit Rocksolid nicht aus, aber vielleicht hilft es, wenn du dem Sticky-Div dieses CSS gibst:

display:block;
width:100%;

Gruß
Thoni

[Miguel]

Danke für den Tipp

Momentan habe ich eine Behelfslösung, indem ich dem main-navigation-wrapper über media queries feste Breiten zuweise – dann wird die Breite beim Herunterscrollen beibehalten. Wenn man das Browserfenster dann aber nach links in der Breite verkleinert, verkleinert sich die Navileiste dann aber nicht stufenlos mit, sondern springt dann auf die fix angelegten Breiten. Das ist aber eben nur eine Notlösung. Ich vermute, dass eine Anweisung in der "sticky.js" irgendwo die Breite der Navigation beim Scrollen zurücksetzt.

Vor dem Scrollen weist das Script dem "main-navigation-wrapper" die Klasse "stuckMenu" zu: .main-navigation-wrapper stuckMenu

Beim Herunterscrollen sehe ich in Firebug, dass das Script dann die Klasse "isStuck" hinzufügt.

Die Anwendung der Regeln "display:block; / width:100%;" für den main-navigation-wrapper" bewirken, dass die Navileiste beim Herunterscrollen nicht zusammenschrupft, sondern – im Gegenteil – zum rechten Browserrand hin "ausbricht" und zu groß wird.

Ich nehme an, dass ich nicht der erste bin, der Opensauce in Kombination mit dem Sticky-Script verwendet – deshalb meine Hoffnung, dass jemand das Problem schon mal lösen konnte.


Gruß
Micu

[Spooky]

Poste einen Link zur Seite.

[Miguel]

zum Beispiel: https://www.hytecon.de/index.php/ueber_hytecon.html

Da habe ich momentan eine feste Breite für den naviagation-wrapper eingestellt, sodass sich beim Herunterscrollen die Breite nicht verändert.

Aber sobald ich die feste Breite rausnehme, wird es kniffelig:

1. Bei der Verkleinerung des Browserfensters von rechts nach links sollen sich die horizontale Haupt- und die Subnavigation in gleichem Maß in der Breite verkleinern
2. Bei Herunterscrollen soll sich die Breite der fixierten Hauptnavi nicht verändern

VG
Micu

[Spooky]

So wie du es jetzt machst, musst du es auch machen. Wenn du einem block Element position:absolute; oder position:fixed; gibst, verliert es die automatische 100% Breite (in seinem Parent). width:100%; kannst du aber nicht verwenden, da sich die 100% bei position:fixed; auf den Viewport beziehen.