Search Icon verschieben expanse theme

[Ferismateam]

Hey ich würde gerne den search icon links haben und den Header in der Mitte ich habe mein bestes gegeben und es nicht lösen können kann mir jemand behilflich sein.
Url : 

https://mihenk-parfum.de/ 

Liebe Grüße
Ferisma

[Gabe]

Hey @Ferismateam 

Danke für die URL und hierfür gibt es ein paar Dinge zu beachten, denn man kann den Header deines Expanse Theme zwar mit Code bearbeiten, um das zu erreichen was du dir vorstellst, nur kann es auch den Header auch ziemlich zerschiessen, ggf. auch auf mobile. Und was genau meinst du mit "den Header in der Mitte". Meinst du das Branding Logo?

Wenn du es selber programmieren möchtest dann bitte immer in einer Themekopie/Testumgebung zuerst testen und zusammen mit einem Experten/Programmierer. Du kannst ein Backup deines Themes erstellen, bevor man den Code bearbeitet, oder den Code wiederherstellen, falls dies nötig sein sollte. Du könntest auch einen unserer Experten engagieren indem du denen eine E-Mail rüberschießt. Unsere Experten antworten meist sehr schnell.

Änderungen zu deinem Theme Code können auch 1) die Page Loading Speeds negativ beeinflussen und 2) dein Theme aus den Theme Updates ausschließen. Das folgende ist Theme-abhängig, ohne Gewähr und dient lediglich dazu dich in die richtige Richtung zu weisen!

Ich habde deinen Header jetzt in der Dev Console angeschaut und um das Suchsymbol nach links zu verschieben und den Header deines Shopify Expanse Themes in der Mitte zu zentrieren, musst du die HTML-Struktur und das CSS anpassen. Hier ist ein modifiziertes deines Codes im Header.liquid, die das Suchsymbol nach links verschiebt und den Header zentriert:

Spoiler

<div data-section-id="sections--18419291357448__header" data-section-type="header">
  <div id="HeaderWrapper" class="header-wrapper header-wrapper--compressed">
    <header id="SiteHeader" class="site-header" data-sticky="true" data-overlay="false">

      <div class="site-header__element site-header__element--top">
        <div class="page-width">
          <div class="header-layout" data-layout="center" data-nav="beside" data-logo-align="center">
            <div class="header-item header-item--icons">
              <div class="site-nav">
                <div class="site-nav__icons">
                  <a href="/search" class="site-nav__link site-nav__link--icon js-search-header js-no-transition">
                    <svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-search" viewBox="-0 0 64 64">
                      <path d="M47.16 28.58A18.58 18.58 0 1 1 28.58 10a18.58 18.58 0 0 1 18.58 18.58ZM54 54 41.94 42" style="stroke-miterlimit:10"></path>
                    </svg>
                    <span class="icon__fallback-text">Suche</span>
                  </a>
                </div>
              </div>
            </div>
            <div class="header-item header-item--logo">
              <h1 class="site-header__logo"><span class="visually-hidden">Mihenk Parfumes</span>
                <a href="/" class="site-header__logo-link logo--has-inverted">
                  <image-element data-aos="image-fade-in" data-aos-offset="150" class="aos-init aos-animate">
                    <img src="//mihenk-parfum.de/cdn/shop/files/mihenk.logo.schwarz.keinschatten.png?v=1716563501&amp;width=420" alt="" srcset="//mihenk-parfum.de/cdn/shop/files/mihenk.logo.schwarz.keinschatten.png?v=1716563501&amp;width=210 210w, //mihenk-parfum.de/cdn/shop/files/mihenk.logo.schwarz.keinschatten.png?v=1716563501&amp;width=420 420w" width="210" height="64.0" loading="eager" class="small--hide image-element" sizes="210px" style="max-height: 64.0px;max-width: 210px;">
                  </image-element>
                  <image-element data-aos="image-fade-in" data-aos-offset="150" class="aos-init aos-animate">
                    <img src="//mihenk-parfum.de/cdn/shop/files/mihenk.logo.schwarz.keinschatten.png?v=1716563501&amp;width=260" alt="" srcset="//mihenk-parfum.de/cdn/shop/files/mihenk.logo.schwarz.keinschatten.png?v=1716563501&amp;width=130 130w, //mihenk-parfum.de/cdn/shop/files/mihenk.logo.schwarz.keinschatten.png?v=1716563501&amp;width=260 260w" width="130" height="39.61904761904762" loading="eager" class="medium-up--hide image-element" sizes="130px" style="max-height: 39.61904761904762px;max-width: 130px;">
                  </image-element>
                </a>
              </h1>
            </div>
            <div class="header-item header-item--navigation" role="navigation" aria-label="Primary">
              <ul class="site-nav site-navigation site-navigation--beside small--hide">
                <li class="site-nav__item site-nav__expanded-item">
                  <a href="/collections/herren" class="site-nav__link site-nav__link--underline">Herren</a>
                </li>
                <li class="site-nav__item site-nav__expanded-item">
                  <a href="/collections/damenparfume" class="site-nav__link site-nav__link--underline">Damen</a>
                </li>
                <li class="site-nav__item site-nav__expanded-item">
                  <a href="/collections/unisexdufte" class="site-nav__link site-nav__link--underline">Unisex</a>
                </li>
                <li class="site-nav__item site-nav__expanded-item">
                  <a href="/collections/topseller" class="site-nav__link site-nav__link--underline">Topseller</a>
                </li>
                <li class="site-nav__item site-nav__expanded-item">
                  <a href="/collections/unsere-empfehlung" class="site-nav__link site-nav__link--underline">Neu eingetroffen</a>
                </li>
                <li class="site-nav__item site-nav__expanded-item">
                  <a href="/collections/fotm-fragrance-of-the-month" class="site-nav__link site-nav__link--underline">FOTM</a>
                </li>
              </ul>
            </div>
            <div class="header-item header-item--icons">
              <div class="site-nav">
                <div class="site-nav__icons">
                  <a class="site-nav__link site-nav__link--icon small--hide" href="/account">
                    <svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-user" viewBox="0 0 64 64">
                      <path d="M35 39.84v-2.53c3.3-1.91 6-6.66 6-11.42 0-7.63 0-13.82-9

Hoffe das hilft dir weiter - lass wissen falls nicht! 😉

---
Warum nicht etwas Gamification in das Shop einbauen, um deinen Kunden etwas Fun im Shop anzubieten? Gerne kann ich bei Interesse Tipps dazu geben!

Hast du weitere Fragen zum Shop? Gebe einfach ein Suchbegriff oben in der Suchleiste der Community Landingpage ein, denn das Thema haben wir sehr wahrscheinlich schon besprochen. Halte bitte Ausschau in deiner E-Mail auf Notifications zu Antworten auf deine Fragen in der Community.

[Ferismateam]

es ist nicht so schwer ich weis es jedoch kenn ich mich im aufbau nicht so aus, man könnte auch nur die mobile funktion ändern ohne das die desktop ansicht verändert wird, danke aber für deine zeit jedoch hilft mir das nicht weiter.
LG

[Gabe]

@Ferismateam 

Es ist nicht so einfach wie du dir denkst und das beste was ich dir empfehlen kann ist das entweder mit den Theme Entwickler zu besprechen, oder einen der Experten die ich oben verlinkt habe, anzuschreiben. Die können das für dich programmieren denn es verlangt einiges an Codierung:

Apropos, so wie dein Header jetzt ist, ist doch nicht so schlecht oder?

Hoffe das hilft dir weiter - lass wissen falls nicht! 😉

[Ferismateam]

habe mich an den support gemeldet leider bieten die für diese funktion keinen support

[Ferismateam]

ich habe es mir auch angeschaut ich müsste ein eigenes nav erstellen entweder den ganzen nav umbauen oder ich verschiebe das logo in die mitte mit der ganzen section und mache einfach ein margin-left auf das icon damit das icon siechtbar wird

[Gabe]

@Ferismateam 

Probiere mal diesen diesen CSS-Code zu deinem css editor (mehr dazu hier) :

/* Für die mobile Ansicht */
@media only screen and (max-width: 768px) {
  /* Suchsymbol nach links verschieben */
  .header-item--icons {
    display: flex;
    justify-content: flex-start;
  }

  /* Logo zentrieren */
  .header-item--logo {
    flex: 1;
    display: flex;
    justify-content: center;
  }
  
  /* Platz für das Suchsymbol schaffen */
  .site-header__logo {
    margin-left: 50px; /* Anpassen, um genügend Platz für das Suchsymbol zu schaffen */
  }
}

1. Media Query: Der CSS-Code wird nur auf Bildschirmbreiten von maximal 768px angewendet, um nur die mobile Ansicht zu ändern.
2. header-item--icons: Diese Klasse wird verwendet, um das Suchsymbol nach links zu verschieben, indem justify-content: flex-start hinzugefügt wird.
3. header-item--logo: Diese Klasse wird verwendet, um das Logo zu zentrieren, indem flex: 1 und justify-content: center hinzugefügt werden.
4. site-header__logo: Diese Klasse wird verwendet, um das Logo ein wenig nach rechts zu verschieben, um Platz für das Suchsymbol zu schaffen.

[Ferismateam]

hey gabe ich sehe keinen code 😄

[Gabe]

@Ferismateam 

Mach mal einen Refresh dieser Seite. Es war noch am Laden

[Ferismateam]

ja war am laden danke für deine zeit ich weis es zu schätzen jedoch hat es nichts gebracht

[Gabe]

[Gabe]

@Ferismateam 

Yup stimmt also nicht ganz einfach.

Stelle deine Frage auch in unseren Experten Design Forum aber auf Englisch und mit dem Link zum Shop, aber mit bitte etwas mehr Beschreibung genau was du haben möchtest, als "ich würde gerne den search icon links haben und den Header in der Mitte". 

Da wird sich ein Programmierer bestimmt melden.

VG,