Symbol für Suche nach rechts

[JT25]

Moin,

ich würde in dieser Angelegenheit mal eure Hilfe benötigen. Wie bekomme ich das Symbol der Suche rechts angeordnet?

In der mobilen Version passt es soweit. Nur die Desktop-Variante möchte nicht.
Ich nutze das Dawn Theme.

LG

[Finer · Accepted solution]

@JT25 dazu musst du im Code-Editor des Themes unter Assets in die base.css gehen und folgenden Abschnitt suchen (ab Zeile 2406):

@media screen and (min-width: 990px) {
  .header:not(.header--top-center) * > .header__search,
  .header--top-center > .header__search {
    display: inline-flex; <-- diesen Wert (inline-flex) zu none ändern.
  }

  .header:not(.header--top-center) > .header__search,
  .header--top-center * > .header__search {
    display: none; <-- diesen Wert (none) zu inline-flex ändern.
  }
}

Da wo "display:inline-flex;" steht, den Wert in "none" (statt "inline-flex") setzen.

Da wo "display:none;" steht den Wert in "inline-flex" (statt "none") setzen. 

Das sieht dann folgendermaßen aus:

@media screen and (min-width: 990px) {
  .header:not(.header--top-center) * > .header__search,
  .header--top-center > .header__search {
    display: none;
  }

  .header:not(.header--top-center) > .header__search,
  .header--top-center * > .header__search {
    display: inline-flex;
  }
}

Dann wird das Such-Icon auf der rechten Seite angezeigt.

Aber Achtung!

Diese Änderung greifen aufgrund der Auswahl des Header-Layout (Logo mittig). Wenn du das Layout änderst, kann das zu Fehlern in der Ansicht führen. Daher empfehle ich vorher eine Sicherheitskopie deines Themes zu erstellen. Falls irgendwelche unerwarteten Fehler auftauchen, kannst du einfach die Sicherheitskopie verwenden.

[JT25]

Moin @Finer danke für die schnelle und ausführliche Lösung. 

[EComMan1]

geht das auch wenn die Suche in der Mobilen version unterhalb des logos erscheinen soll?

[Gabe]

Hey @EComMan1 

Ja, und du hast jetzt den neuen CSS Editor direkt im Theme Editor um das auf Mobile zu testen. Füge den folgenden CSS-Code da ein oder passe den bestehenden Code entsprechend an, wie folgendes Beispiel:

/* Mobile */
@media screen and (max-width: 989px) {
 .header__search {
   display: flex;
   width: 100%;
   justify-content: center;
   margin-top: 10px; /* Optional: Fügen Sie einen Abstand zwischen Logo und Suchsymbol hinzu */
 }
}

Dieser Code sollte sicherstellen, dass das Suchsymbol in der mobilen Version unterhalb des Logos angezeigt wird und zentriert ist. Der Wert max-width: 989px sollte entsprechend den Breakpoints deines Themes angepasst werden.

Wenn du möchtest, dass das Suchsymbol nur in der mobilen Version und nicht auf Tablets angezeigt wird, den max-width-Wert auf einen kleineren Wert ändern, der für mobile Geräte spezifisch ist, z. B. 767px:

/* Mobile */
@media screen and (max-width: 767px) {
  .header__search {
    display: flex;
    width: 100%;
    justify-content: center;
    margin-top: 10px; /* Optional: Fügen Sie einen Abstand zwischen Logo und Suchsymbol hinzu */
  }
}

Das ganze ist Theme-abhängig, ohne Gewähr und dient lediglich dazu dich in die richtige Richtung zu weisen!

[EComMan1]

du meisnt unter header css ?

klappt bei mir leider nicht

[EComMan1]

bekomme diesen fehler

Sitzung im Onlineshop-Editor kann nicht veröffentlicht werden

[Gabe]

Bei mir hats wunderbar geklappt:

[EComMan1]

nein klappt leide rnicht...

Die lupe / Suche soll wie im bildmit gelb makiert unterhalb des Logos sein ( Nur mobile)

Ich habe den Code in das CSS editor im Head element platziert. Klappt aber leider nicht. Mache ich was falsche?

[Gabe]

Das ist leider Theme abhängig. Probiere folgenden Code:

@media screen and (max-width: 990px){
.header__search{
   position: absolute;
   bottom: 5px;
   left: 0;
   width: 100%;
}
.header__search > details{
   width: 100%;
   padding: 0 12px;
   display: flex;
   justify-content: center;
}
.header__search > details > .header__icon{
      width: 100%;
}
.header{
   position: relative;
   padding-bottom: 58px !important;
}
.header .header__icons .icon-search {
   color: #707070;
}
.header .header__icons span{
 justify-content: center !important;
}
.header__search summary span::after {
   content: "Nach Produkte suchen";
   padding-left: 1.2rem;
   font-size: 1.2rem;
   color: rgb(147, 147, 147);
}
.shopify-section-header-hidden{
 top: calc(-1 * var(--header-height) - 58px);
}
}

Wenn das nicht geht, füge das im base.css ein und stelle sicher, dass der Code innerhalb des entsprechenden CSS platziert wird.

[Gabe]

Hi @JT25 

Und wie @Finer sagt - die Code Snippets vom @Finer kannst du beliebig in einer Sandkästchen Themekopie testen, um zu sehen wie der erwünschte Effekt ist und das dann darauf im Live-Theme implementieren.

Lass wissen, wenn du weitere Fragen hast zum obigen Thema oder generell zu deinem Shop und Business und gerne können wir das hier weiter besprechen!
 
Wir führen gerade eine kurze Umfrage zu Eurer Erfahrung in der Community durch mit 4 kurzen Fragen. Wenn Du mal 2-Min Zeit hast - die Umfrage ist auch anonym:

• https://forms.gle/SSVUmn5vXLYYW9Dh8

2022 wird dein Jahr! Haltet Abstand und bleibt Gesund.