Menüpunkte für die Mobile Version anpassen

[mastahlb]

Hallo zusammen,

wie der Titel schon verrät, möchte ich in der Mobilen Version des Stores 2 Icons / Menüpunkte miteinander tauschen.

Der Menüpunkt Warenkorb soll mit dem Hamburger (3 Striche) getauscht werden. Weiß jemand wie ich das umsetzten kann? Wichtig ist, dass dies ist der Mobilen Version geschehen muss.

Ich benutze das Motion Theme

Mit freundlichen Grüßen

[Ben310 · Accepted solution]

Wenn dir die 7 unten abgebildeten Theme Einstellungen nicht ausreichen wird das eine komplexe Programmierung verlangen, die sowohl dein Theme aus den Theme Updates ausschließt, sowie ggf. die Page Loading Speeds verschlechtert. Anonsten einen Experten engagieren:

Programmierung - Beispiel:

Zuerst musst du die Reihenfolge im HTML so ändern, dass der Warenkorb zuerst angezeigt wird, gefolgt vom Hamburger-Menü. Verschiebe beispielsweise  das <button> des Hamburger-Menü HTML und das <a>-Element des Warenkorbs in der Reihenfolge, wie sie auf mobilen Geräten erscheinen sollen (genommen aus der Developer Console und meinem Test Motion-Theme):

<!-- Mobilversion Navigation -->
<div class="header-item header-item--icons">
  <div class="site-nav site-nav--icons">
    <div class="site-nav__icons">
      <!-- Warenkorb-Icon zuerst -->
      <a href="/cart" class="site-nav__link site-nav__link--icon js-drawer-open-cart js-no-transition" aria-controls="CartDrawer" data-icon="bag-minimal" aria-expanded="false">
        <span class="cart-link">
          <svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-bag-minimal" viewBox="0 0 64 64">
            <title>icon-bag-minimal</title>
            <path d="M11.375 17.863h41.25v36.75h-41.25z"></path>
            <path d="M22.25 18c0-7.105 4.35-9 9.75-9s9.75 1.895 9.75 9"></path>
          </svg>
          <span class="icon__fallback-text">Einkaufswagen</span>
          <span class="cart-link__bubble cart-link__bubble--visible"></span>
        </span>
      </a>

      <!-- Hamburger-Menü danach -->
      <button type="button" class="site-nav__link site-nav__link--icon js-drawer-open-nav" aria-controls="NavDrawer" aria-expanded="false">
        <svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-hamburger" viewBox="0 0 64 64">
          <title>icon-hamburger</title>
          <path d="M7 15h51M7 32h43M7 49h51"></path>
        </svg>
        <span class="icon__fallback-text">Seitennavigation</span>
      </button>
    </div>
  </div>
</div>

Etwas CSS dafür:

@media only screen and (max-width: 768px) {
  .header-item--icons .site-nav__icons {
    display: flex;
    flex-direction: row-reverse;
  }
}

[mastahlb]

Vielen Dank Deine Nachricht.

Der oben stehende HTML Code hat funktioniert. Ich habe den CSS Teil weggelassen, da sonst die Icons nicht da sind wo sie seien sollen. Oder hat der CSS Code eine wichtige Aufgabe / Bedeutung?

Beste Grüße

[Ben310]

Das CSS ist nur für die "Verschönerung" des Codes...