ich möchte oben in der Navigation unser Logo auf die ganze breite haben.
Das ganze sollte wenn irgendwie möglich auf Desktop,Tablets und Mobile angepasst werden.
Leider bringe ich mit diesem Code auf der Desktopvariante mein Logo nicht in die Mitte des Top Navi? Irgendwie muss da doch der Befehl “center” noch rein?
Und auf der Mobilevariante ist es eine Katastrophe.
Ich weiss schon es fehlt der Code für die Anpassung aber wo muss dieser genau rein?
Auch wollte ich gestern noch den Warenkorb,Merkzettel und das Konto verschieben in die Top Navi aber das ging auch in die Hose und mein Templates wurde nicht mehr geladen.
Danke euch Profis vielmal für Hilfe wie ich den Code umschreiben muss.
das ganze ist nicht mal so schnell erledigt, denn wenn das Logo über den ganzen Header geht verschieben sich auch der ganze “shop–navigation block-group” unter das Logo.
Und erschwert kommt noch dazu das es bei alles Ansichten passen muss.
Hatt jetzt jemand noch so ein super Tipp wie ich nun mein Logo in die mitte des Italienwappen bringen könnte?
Ich muss es vergrössern das ist mir klar und das Suchfeld ausblenden.
Nur wie könnte ich das realisieren?
habe noch einen Code gefunden aber wie könnte ich das ganze zusammenbringen und dann das Logo noch im Header zentrieren?
.header-main { // Logo .logo-main { .logo–link { .unitize-height(45); // Anpassen der Höhe, Angabe in px } // Smaller logo for mobile viewports .logo–shop { .unitize-height(45); // Anpassen der Höhe, Angabe in px } } }
Also zum Thema zentriertes Logo habe ich zwei Plugins veröffentlicht, die gibt’s auch im Bundle. Einfach im Store mal „zentriertes Logo“ suchen.
Logo beginnend ab ipad breit grösser machen ist relativ simpel, vorraussetzung ist aber, dass das Logo selbst dann nicht zu breit ist(sonst wirds verzerrt):
Das erhöht die Höhe von 50 auf 80 Pixel und schiebt das ganze einfach 30px nach oben
Bitte beachte aber, dass Du dann die Vergleichen Funktion ausschaltest, sonst wirds im Header zu eng (zumindest wenn du das Logo zentrierst).
Edit: waren zwei Tippfehler drin, so sollte es gehen
Also zum Thema zentriertes Logo habe ich zwei Plugins veröffentlicht, die gibt’s auch im Bundle. Einfach im Store mal „zentriertes Logo“ suchen.
Logo beginnend ab ipad breit grösser machen ist relativ simpel, vorraussetzung ist aber, dass das Logo selbst dann nicht zu breit ist(sonst wirds verzerrt):
Das erhöht die Höhe von 50 auf 80 Pixel und schiebt das ganze einfach 30px nach oben
Bitte beachte aber, dass Du dann die Vergleichen Funktion ausschaltest, sonst wirds im Header zu eng (zumindest wenn du das Logo zentrierst).
Edit: waren zwei Tippfehler drin, so sollte es gehen
Hallo,
das verfolgt den responsiven Ansatz (von Shopware) aber nicht wirklich, wenn man einfach irgendwelche Bereiche so verschiebt und vor allem auch noch in Pixelwerten. Die sauberste Lösung ist der Code nun wirklich nicht. Oben em-Werte verwenden, unten Pixel-Werte .
das verfolgt den responsiven Ansatz (von Shopware) aber nicht wirklich, wenn man einfach irgendwelche Bereiche so verschiebt und vor allem auch noch in Pixelwerten. Die sauberste Lösung ist der Code nun wirklich nicht. Oben em-Werte verwenden, unten Pixel-Werte .
Beste Grüße
Sebastian
em/rem kann man ja noch einsetzen. Die 48em sind Shopware Standard.
height: 50px; height: 3.125rem Somit rechnet man nur 3.125/50*80 und kennt auch den rem Wert 5rem danach.
Gleiches kann man natürlich auch für die 30 px anwenden, kommt 1.875rem raus.
Das obere Beispiel wäre demnach @media (min-width:48em){
.logo–link img{
max-height: 80px;
max-height: 5rem;
height: 80px;
height: 5rem;
margin-top:-30px;
margin-top:-1.875rem;
}
}
das verfolgt den responsiven Ansatz (von Shopware) aber nicht wirklich, wenn man einfach irgendwelche Bereiche so verschiebt und vor allem auch noch in Pixelwerten. Die sauberste Lösung ist der Code nun wirklich nicht. Oben em-Werte verwenden, unten Pixel-Werte .
Beste Grüße
Sebastian
em/rem kann man ja noch einsetzen. Die 48em sind Shopware Standard.
height: 50px; height: 3.125rem Somit rechnet man nur 3.125/50*80 und kennt auch den rem Wert 5rem danach.
Gleiches kann man natürlich auch für die 30 px anwenden, kommt 1.8875rem raus.
Das obere Beispiel wäre demnach @media (min-width:48em){
.logo–link img{
max-height: 80px;
max-height: 5rem;
height: 80px;
height: 5rem;
margin-top:-30px;
margin-top:-1.8875rem;
}
}
Wieso so? So steht das nicht in der Doku. Das versteht doch kein Mensch. Dafür gibt es doch die unitize-Methoden:
@media (min-width:@tabletViewportWidth){
.logo-link img {
.unitize-max-height(80);//?
.unitize-height(80);//? Wieso max height wenn height im Anschluss gesetzt wird?
.unitize-margin(30, 0, 0, 0);
}
}
das verfolgt den responsiven Ansatz (von Shopware) aber nicht wirklich, wenn man einfach irgendwelche Bereiche so verschiebt und vor allem auch noch in Pixelwerten. Die sauberste Lösung ist der Code nun wirklich nicht. Oben em-Werte verwenden, unten Pixel-Werte .
Beste Grüße
Sebastian
em/rem kann man ja noch einsetzen. Die 48em sind Shopware Standard.
height: 50px; height: 3.125rem Somit rechnet man nur 3.125/50*80 und kennt auch den rem Wert 5rem danach.
Gleiches kann man natürlich auch für die 30 px anwenden, kommt 1.8875rem raus.
Das obere Beispiel wäre demnach @media (min-width:48em){
.logo–link img{
max-height: 80px;
max-height: 5rem;
height: 80px;
height: 5rem;
margin-top:-30px;
margin-top:-1.8875rem;
}
}
Wieso so? So steht das nicht in der Doku. Das versteht doch kein Mensch. Dafür gibt es doch die unitize-Methoden:
@media (min-width:@tabletViewportWidth){
.logo-link img {
.unitize-max-height(80);//?
.unitize-height(80);//? Wieso max height wenn height im Anschluss gesetzt wird?
.unitize-margin(30, 0, 0, 0);
}
}
mehr als von steinsoftware beschrieben gibt es zu dem Thema auch nicht zu sagen. Genauso wäre es richtig. Ich will gar nicht wissen, wie der Code der Plugins von webdesignhoehne aussieht .
So passt es noch nicht ganz @steinsoftware der top-margin ist negativ (sonst schiebt es das Logo nach unten und nicht nach oben), bis darauf sollte dein Beispiel aber passen.
max-height muss dazu gesetzt werden, da es mit 100% max-height sonst auch nur 50px hoch wäre ;)
.
.