7 Antworten zu diesem Thema

[suelzi]

Guten Morgen,

 

wir erstellen einen neuen Shop mit der aktuellen .NET-Version und würden gerne die Suche im Header-Bereich kleiner machen. Nur halb so groß - um den Bereich neben dem Logo besser nutzen oder das Logo größer darstellen zu können.

 

 

 

Des Weiteren soll die Suche nicht mehr ausgeklappt werden, sofern man einmal draufklickt.

 

 

 

Wie ist das umsetzbar?

 

Vielen Dank im Voraus,

 

freundliche Grüße

 

Christine Börchers

[mara]

Moin,

 

wenn du im CSS die neue Höhe des Logos notierst passt sich die Suche automatisch an

 

Beispiel:

 

.shop-logo{
    height:120px;
}

[suelzi]

Guten Morgen

 

und Dankeschön erstmal,

 

ich möchte aber nicht die Höhe ändern, sondern die Breite der Suche, so dass neben dem Logo noch was stehen kann.

Die Suche soll also nur halb so lang sein.

 

 

Vielen Dank.

 

[kusnez]

Hallo,

http://community.sma...länge/?p=273610

[mara]

Guten Morgen,

 

wir erstellen einen neuen Shop mit der aktuellen .NET-Version und würden gerne die Suche im Header-Bereich kleiner machen. Nur halb so groß - um den Bereich neben dem Logo besser nutzen oder das Logo größer darstellen zu können.

 

 

 

Guten Morgen

 

und Dankeschön erstmal,

 

ich möchte aber nicht die Höhe ändern, sondern die Breite der Suche, so dass neben dem Logo noch was stehen kann.

Die Suche soll also nur halb so lang sein.

 

suche_halb_so_gross.jpg

 

Vielen Dank.

 

 

Hallo,

 

wenn das Logo größer werden soll wird es doch automatisch auch breiter!? M.E. gibt es zwei Möglichkeiten: entweder das ganze Ding umbauen (have fun) oder das was neben dem Logo stehen soll mit ins Bild packen. Das ist zwar nicht wirklich schön, aber spart eine Menge Zeit und Besucher sehen das eh nicht ;-)

[suelzi]

Vielen Dank, E. Kusnezov,

habe das vorher nicht gefunden.

 

Das funktioniert wunderbar. Jetzt muss nur noch das "aufklappen" verhindert werden.

 

Dazu vielleicht noch eine Idee?

[Murat Cakir]

Das funktioniert wunderbar. Jetzt muss nur noch das "aufklappen" verhindert werden.

.search-focused .shop-logo {
    opacity: 1; /* damit Logo nicht mehr ausgeblendet wird */
    transform: none; /* Animation unterdrücken  */
    margin-left: 0 !important; /* Verhindert, dass die Suchleiste den Platz des Logos einnimmt  */
}

[suelzi]

Perfekt,

vielen vielen Dank.