#1

W. Reske

Grünschnabel  (20 Punkte)  ·   männlich  ·   Deutschland  ·   Nachricht senden
 http://www.tel-shop.de

Hallo zusammen,

ich nutze das Design Yttrium in Siquando Shop 8 und bräuchte etwas Rat und Hilfe was nötig wäre, um die obere Navigationsleiste zu fixieren.

Das wäre wirklich super.


Ich bedanke mich vielmals im Voraus!

LG, W. Reske

#2

Volker W.

Administrator  (7794 Punkte)  ·   männlich  ·   Deutschland  ·   Nachricht senden
 https://www.warmers.de  ·   vwarmers  ·   vwarmers  ·   volkerw68

Willkommen im Forum! :-)


Wenn Du mit "Element untersuchen" (per Rechtsklick im Browserfenster verfügbar) mal ein wenig herum experimentierst, wirst Du herausfinden, daß sich Dein Anliegen mit folgendem Code realisieren läßt.

nav {
	position: fixed;
	top: 0px
	left: 0px
	right: 0px
	z-index: 1000;
}
 
header {
	top: 61px;
}

Erweitere also in der style_design.css des Designs die Bereiche nav und header um die o.g. Werte. Die darin bereits bestehenden Angaben behälst Du unverändert bei.

Fertig!!


Viele Grüße,
Volker

Über mich  ·  Volker W. Musik & Sounds  ·  Facebook  ·  Twitter  ·  Instagram  ·  StayFriends  ·  LinkedIn  ·  XING

#3

W. Reske

Grünschnabel  (20 Punkte)  ·   männlich  ·   Deutschland  ·   Nachricht senden
 http://www.tel-shop.de

Vielen Dank für die schnelle Antwort und die ausführliche Erklärung Volker,

das hat soweit funktioniert, die Navigationsleiste ist nun fixiert.

Folgende Unzulänglichkeiten fallen mir dabei dennoch auf:

1. Beim scrollen versteckt sich die Leiste unterhalb von Grafiken

2. Die Navigationsleiste ist nur so breit, wie sie Buttons hat (Warengruppen), bei mir sind es 4 Warengruppen, also ca. halber Bildschirm. Ideal für die Darstellung währe hier natürlich komplett durchgehend von links nach rechts: weisser Bereich mit einer grauen Umrandung (wie bei den Popups "Unterwarengruppen") zur besseren Abgrenzung zu dem restlichen Content, den der Besucher nach unten durchscrollt.

Ist bestimmt deutlich umfangreicher es so umzustricken, oder was denkst Du?


Ich bedanke mich herzlich im Voraus!

LG, Waldemar

#4

Sven aus Berlin

Forum-Sponsor  (435 Punkte)  ·   männlich  ·   Deutschland  ·   Nachricht senden

Hallo Waldemar,

ich habe die Navigationsleiste ebenfalls fixiert, bin aber auf eine andere Lösung gekommen. Ich habe mich der erweiterten Eigenschaft bedient. &site (global). Somit kannst du bestimmen siteglobal ob die Navigationsleiste fixiert sein soll oder eben nicht.

Ich bin folgendermaßen vorgegangen. In der config.ccml habe ich ein neuen Eitrag hinzugefügt:

navigation.ccml
<cc:property id="design.menufixed" caption="Menüs am oberen Bildschirmrand fixieren" folder="Design" targettype="site" type="boolean" default="1">

 In der style_design.css habe ich ein neuen Eintrag zusätzlich hinzugefügt:

style_design.css
nav {
	max-width: 1600px;
	min-width: 960px;
	width: 100%;
        <cc:if cond="&site.properties.design.menufixed">
	position: fixed;
	margin-bottom:30px;
        </cc:if>
	z-index: 900;
}

 und habe den Eintrag <header> ein top: 61px hinzugefügt. Wie Volker oben richtig aufführte mit dem <ccf cond="xxxx">.:

style_design.css
header {
	position: relative;
	overflow: hidden;
        <cc:if cond="&site.properties.design.menufixed">
	top:61px;
	</cc:if>
}

 Denn wenn man nur den top:61px hinzufügt und die Navigations nicht fixiert, erhält man logischerweise einen oberen Abstand des Eyecatchers von 61px. Und das wollen wir ja nicht.

So, probier es aus und gib ne Rückmeldung! Schöne Pfingsten euch noch!

 

 


Spontaneität muss sorgfältig geplant werden.


Dieser Beitrag wurde bereits 1 mal bearbeitet, zuletzt von »Sven aus Berlin« (15.05.2016, 10:13)
#5

W. Reske

Grünschnabel  (20 Punkte)  ·   männlich  ·   Deutschland  ·   Nachricht senden
 http://www.tel-shop.de

Vielen dank auch Dir Sven und auch dir schöne Pfingsten!

 

Auch das hat super geklappt und wir kommen der Sache schon deutlich näher !!

 

Die Leiste ist nun komplett auf die volle Bildschirmbreite fixiert und sie verschwindet nun auch nicht mehr unter Grafiken, sondern hält sich stets brav im Vordergrund. Das ist super, danke für die wertvollen und präzisen Tipps !!

 

Folgendes ist aber auch hier noch etwas nicht korrekt:

1. Hier sehen wir ein Screenshot wie es bei uns vor der Modifikation ausgesehen hat.

Beachte bitte den Abstand unter dem Titelbild zu dem Seitentitel dadrunter. Sieht alles soweit korrekt aus ..

 

1.jpg

So soll es sein

 

Nach der Modifikation von Volker und Deinem Vorschlag kam es jeweils dazu, dass nun die Schrift (und auch der ganze Content darunter) unter dem Titelbild etwa (oder genau) um die Höhe der Navigationsleiste nach oben gerückt ist. Hier das Beispiel:

2.jpg

So ist es jetzt

 

Das müsste man nun iwie global korrigieren ..

 

2. Mir fehlt leider immer noch der dezente graue Rahmen, bzw. eine dünne graue Linie unterhalb der Navigationsleiste.

Das sieht nach der Modifikation nun so aus, wenn man den Content runterscrollt:

3.jpg

Weiss auf weiss

 

Optimal währe es z.B. so:

4.jpg

Das währe top, mit grauem Rahmen

 

So einen grauen Rahmen gibt es ja schon im Design Yttrium, wenn ich z.B. in der Navigation auf eine Warengruppe klicke, öffnet sich ein weisses Popup in einem grauen Rahmen. Das sieht dann so aus:

5.jpg

Grauer Rahmen

 

Und in so einen Rahmen müssten wir auch nun die Navigationsleiste packen können ..


Das währe perfekt!

Für eure Ideen danke ich vielmals im Voraus!

LG, Waldemar

#6

W2D Fan

Co-Administratorin  (4549 Punkte)  ·   weiblich  ·   Niederlande  ·   Nachricht senden

Das hat nichts mehr mit dem Anfangsthema zu tun. Bitte für neue Fragen immer ein neues Thema eröffnen. Ich schließe hier.


Gruß,
Marjorie

Hilfe ist nicht selbstverständlich. Deshalb halte ich ein "Dankeschön", nachdem jemandem geholfen wurde, für überaus angebracht und höflich.

1089 Aufrufe | 6 Beiträge