Logobereich transparent

Hier schalten wir den Hintergrund des Logobereiches auf Transparent. Blenden ein größeres Logo ein, vergrößern die Navigation und verrutschen diese etwas nach unten. Somit erreichen wir ein harmonisches Zusammenspiel mit dem Header. Sobald nach unten gescrollt wird blenden wir ein kleines Logo ein, verrutschen die Navi wieder nach oben und verkleinern diese wieder. Der Logobereich bekommt eine Hintergrundfarbe und einen Schatten nach unten.

Ausgangslage:

  • Layout Stripe Responsive
  • Logo ausgeblendet
  • Die beiden Logos auf den Server laden oder wie hier beschrieben einbinden: LINK
  • Kopfgrafik Höhe(min.) 80vh
  • Alles weitere wird per HTML, CSS und jQuery eingebunden.

CSS Code

Diesen Code per Einstellungen > CSS einfügen und anpassen.

markieren & kopieren

Quelltext

Diesen Code per Widget > Quelltext einfügen und anpassen.

markieren & kopieren

code