Header bei Website fixieren?
Hallo zusammen
Ich möchte bei meiner Website den Header (Suchfunktion, Warenkorb usw) fixieren , so dass dieser beim scrollen immer oben ersichtlich ist.
So wie bei dieser Website: http://www.gartenhaus-shop.ch/
Ich nutze das Shopsystem von Gambio. Kann mir jemand ev mit dem Code weiterhelfen.
Besten Dank!
4 Antworten
Setze das CSS-Property position für den Container, der die Navigation enthält, auf fixed (auf der Beispielseite ist dies das header-Element). Außerdem benötigst du am Anfang der Webseite einen Platzhalter / Abstand, damit der oberste Content nicht durch deinen Header verdeckt wird. Wenn du bei deiner Beispielseite einmal schaust, dann siehst du das bei dem body-Element. Es hat einen padding-top von 200px zugeordnet bekommen.
Das kann ich dir auch nicht sagen. Dein Browser kann dabei allerdings helfen, sofern du Zugriff auf das Dateisystem hast.
Du solltest einen passenden CSS-Selektor finden, der dein Container-Element bereits beschreibt. Öffne deine Webseite, öffne die Entwicklerkonsole und schaue im Inspektor (bzw. unter Elements), welcher Knoten deinen Navigationscontainer umfasst / beschreibt. Markiere ihn und schau nach den Werten (dies sind die Namen der Selektoren), die in Attributen wie class oder id stehen. Auch in dem Styles-Fenster rechts werden alle Selektoren aufgeführt, die das Element verwendet. Die Selektoren, die das Element am eindeutigsten beschreiben und kein anderes (ein Id-Selektor wäre daher am besten), solltest du in deinen Dateien suchen. Notepad++ bspw. hat eine gute Suchfunktion, um in allen Dateien eines Verzeichnisses zu suchen.
Für diese Arbeit solltest du allerdings ein Mindestmaß an Grundkenntnissen in HTML und CSS besitzen, sonst machst du dir noch etwas kaputt.
Bei den Test-Templates liegt sie jedenfalls im Ordner assets/css
Schau mal in diese Implementierung rein: https://codepen.io/soulrider911/pen/dGuEn
Im Wesentlichen erfordert diese Umsetzung das CSS-Framework Compass und natürlich jQuery, um die scroll() Funktion zu überschreiben.
Um das administrativ einzustellen brauchst du StyleEdit, hast du dies nicht, bleibt dir nur die Möglichkeit das selbständig anzupassen.
Ich weiß jetzt nicht welche Version du hast aber generell gilt bei den Versionen ab etwa 2.x. und neuer folgendes Prinzip:
Für CSS Anpassungen kannst du unter /templates/DEIN_TEMPLATE/usermod/css/ eine Datei anlegen z.B. custom.css und deine Styles da rein schreiben. Danach Template Cache UND Modul Cache unbedingt leeren!
Für die JS Dateien gibt's das Pendant unter /templates/DEIN_TEMPLATE/usermod/javasciprt/ Wobei du hier noch in den entsprechenden Unterordner (Z.B. Global, Produkt Info Seite, Listing usw.) gehen musst.
Die haben doch Templates, wo das sowieso schon so ist. Jedenfalls ist bei allen, die man da testen kann, die obere Leiste fixiert.
Das ist ja der Witz an der ganzen Sache. Das ist nur bei den Test-Templates so. Ich habe jede einzelne Einstellung beim Testshop und meinem Shop verglichen. Alles gleich...
Das geht scheinbar teils über Javascript. Jedenfall gibts da bei der Gartenhausseite eine Script-Datei, die sich auf den fixierten Header bezieht. Soweit ich das jedenfalls kapiere.
Im Templates-Ordner/assets/javascript-engine/widgets. Irgendwas mit header.min.js
Und zwar schreibt dieses Script beim scrollen ab einer bestimmten Höhe die Klasse "sticky" zusätzlich hier rein
<header id="header" class="navbar sticky"> Das sticky steht da sonst nicht.
Also musst du nachsehen, ob das Script bei dir existiert.
Besten Dank für die Antwort. Das mit dem "Position: fixed;" habe ich auch bereits im Netz gefunden. Leider weiss ich nicht wo die entsprechende CSS Datei bei Gambio liegt.