# Elemte im Header - Skalierung

**URL:** <https://forum.shopware.com/t/elemte-im-header-skalierung/96466>\
**Category:** Shopware 6 (German)\
**Tags:** themes--design\
**Created:** [30. September 2022 um 09:20 UTC](https://forum.shopware.com/t/elemte-im-header-skalierung/96466 "2022-09-30T09:20:28Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![Klingalin](https://avatars.discourse-cdn.com/v4/letter/k/278dde/32.png) [@Klingalin](https://forum.shopware.com/u/Klingalin)\
**Post date:** [30. September 2022 um 09:20 UTC](https://forum.shopware.com/t/elemte-im-header-skalierung/96466/1 "2022-09-30T09:20:28Z")

</div>

Hallo zusammen,

ich habe in einem testprojekt aktuell folgendes Problem - ich habe im Header 3 png grafiken mit Link eingebunden zu social media auftritten).  
das ganze sieht so aus:

 ![image](https://europe1.discourse-cdn.com/flex013/uploads/shopware/original/3X/6/6/66f1fdb561d70772648989dd18c57b1bd467b2e2.png)

Soweit so gut. Nun passiert aber beim resizen des Fenster/mobile ansicht) folgendes:  
(sh. weiter unten, SW Forum lässt mich kein zweites Bild embedden)

Das kommt von der skalierung der Search bar. Meine Frage:  
Wie kann ich das Search icon weiter links - oder linksbündig - ausrichten, damit die einzelnen Elemente daneben noch platz haben und nicht in weitere Zeilen rutschen?

(Ich arbeite derzeit an einem Testprojekt um miene Fähigkeiten aufzubessern bzw. mich überhaupt in shopware 6 und Theme Gestaltung einzuarbeiten, bin also entsprechend noch nicht so gut und frage ggf. öfter nach bei Unklarheiten).

Vielen Dank vorab.

---

<div class="post-metadata">

**Author:** ![Klingalin](https://avatars.discourse-cdn.com/v4/letter/k/278dde/32.png) [@Klingalin](https://forum.shopware.com/u/Klingalin)\
**Post date:** [30. September 2022 um 09:21 UTC](https://forum.shopware.com/t/elemte-im-header-skalierung/96466/2 "2022-09-30T09:21:24Z")

</div>

Bild zu Thema:  
 ![image](https://europe1.discourse-cdn.com/flex013/uploads/shopware/original/3X/8/e/8e611e0225a742bfa6f848a68296f1f65a21e5f9.png)

---

<div class="post-metadata">

**Author:** ![Max\_Shop](https://avatars.discourse-cdn.com/v4/letter/m/58f4c7/32.png) [@Max\_Shop](https://forum.shopware.com/u/Max_Shop)\
**Post date:** [30. September 2022 um 09:31 UTC](https://forum.shopware.com/t/elemte-im-header-skalierung/96466/3 "2022-09-30T09:31:05Z")

</div>

Das hat weniger etwas mit Shopware zu tun, viel mehr mit CSS.

display: flex [Flexbox - Learn web development | MDN](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox)  
col-x [Grid system · Bootstrap](https://getbootstrap.com/docs/4.0/layout/grid/)

---

<div class="post-metadata">

**Author:** ![Klingalin](https://avatars.discourse-cdn.com/v4/letter/k/278dde/32.png) [@Klingalin](https://forum.shopware.com/u/Klingalin)\
**Post date:** [30. September 2022 um 09:47 UTC](https://forum.shopware.com/t/elemte-im-header-skalierung/96466/4 "2022-09-30T09:47:11Z")

</div>

aah vielen Dank.

okay - nur zum Verständnis - bei Shopware 6 sind ja alle Elemente im header mit  
col-12 drin - soweit so gut.

```auto
 {% block layout_header_search %}
                <div class="col-12 order-2 col-sm order-sm-1 header-search-col">
                    <div class="row">
                        <div class="col-sm-auto d-none d-sm-block d-lg-none">
                            {% block layout_header_navigation_toggle_tablet %}
                                <div class="nav-main-toggle">
                                    {% block layout_header_navigation_toggle_tablet_button %}
                                        <button class="btn nav-main-toggle-btn header-actions-btn"
                                                type="button"
                                                data-offcanvas-menu="true"
                                                aria-label="{{ "general.menuLink"|trans|striptags }}">
                                            {% block layout_header_navigation_toggle_tablet_button_icon %}
                                                {% sw_icon 'stack' %}
                                            {% endblock %}
                                        </button>
                                    {% endblock %}
		                        </div>
							{% endblock %}
                        </div>
                        <div class="col">
                            {% sw_include '@Storefront/storefront/layout/header/search.html.twig' %}
                        </div>
						<div class="col-4 header-advantage-col">
							<a href=""> <img src="/media/template/icon--facebook.png" target="_blank">

```

So habe ich das aktuell eingebunden die 3 Bilder/icons mit Link.  
mittels col-4 wird das ganze relativ weit nach rechts gebracht. wenn ich nur auf „col“ ändere und damit das automatisch mache ruscht das ganze weiter nach links - aber immer noch nicht so wie ich das gerne hätte:  
 ![image](https://europe1.discourse-cdn.com/flex013/uploads/shopware/original/3X/0/8/08dc6af3e721b22fbdebeb3caba653a5591da845.png)

bzw. verstehe ich dann richtig dass ich das search field/icon verschieben müsste?

---

<div class="post-metadata">

**Author:** ![Klingalin](https://avatars.discourse-cdn.com/v4/letter/k/278dde/32.png) [@Klingalin](https://forum.shopware.com/u/Klingalin)\
**Post date:** [30. September 2022 um 09:51 UTC](https://forum.shopware.com/t/elemte-im-header-skalierung/96466/5 "2022-09-30T09:51:03Z")

</div>

Vorgestellt hätte ich mir das dann so im xs breakpoint:  
 ![image](https://europe1.discourse-cdn.com/flex013/uploads/shopware/original/3X/0/b/0be354ceece83b4c5f7d0bf0da54cc4cd5d00586.png)

---

<div class="post-metadata">

**Author:** ![Max\_Shop](https://avatars.discourse-cdn.com/v4/letter/m/58f4c7/32.png) [@Max\_Shop](https://forum.shopware.com/u/Max_Shop)\
**Post date:** [30. September 2022 um 10:19 UTC](https://forum.shopware.com/t/elemte-im-header-skalierung/96466/6 "2022-09-30T10:19:07Z")

</div>

layout\_header\_search ist der falsche Block. layout\_header\_actions wäre für dich der richtige Block.

> <https://github.com/shopware/platform/blob/9de5be3314ca527a6e516d1e39d6081e4e17e61a/src/Storefront/Resources/views/storefront/layout/header/header.html.twig>

---

<div class="post-metadata">

**Author:** ![Klingalin](https://avatars.discourse-cdn.com/v4/letter/k/278dde/32.png) [@Klingalin](https://forum.shopware.com/u/Klingalin)\
**Post date:** [30. September 2022 um 11:47 UTC](https://forum.shopware.com/t/elemte-im-header-skalierung/96466/7 "2022-09-30T11:47:08Z")

</div>

Vielen Dank.

Ich habe das angepasst - dann passt es in der Mobile Ansicht aber die Desktop Ansicht quetscht er das dann wieder an die Merkliste, was ich vermeiden möchte.

 ![image](https://europe1.discourse-cdn.com/flex013/uploads/shopware/original/3X/0/6/06683ae7a4a1b8f3df6afb6544bf8bd386223778.png)

Hast du eine Idee wie ich das anpassen kann? Also dass die Searchbar so groß Bleibt aber die Icons für Social media bisschen näher rutschen?

Ich komme mit dem col-12 und dem sm-auto usw. noch nicht so klar, da werd ich mich demnächst mit beschäftigen müssen…  
Danke auf jeden Fall für die Hinweise bisher 🙂

---

<div class="post-metadata">

**Author:** ![Max\_Shop](https://avatars.discourse-cdn.com/v4/letter/m/58f4c7/32.png) [@Max\_Shop](https://forum.shopware.com/u/Max_Shop)\
**Post date:** [30. September 2022 um 11:58 UTC](https://forum.shopware.com/t/elemte-im-header-skalierung/96466/8 "2022-09-30T11:58:21Z")

</div>

Dann musst du dem Instagram div einfach ein margin-right: 20px oder so geben.

---

<div class="post-metadata">

**Author:** ![Klingalin](https://avatars.discourse-cdn.com/v4/letter/k/278dde/32.png) [@Klingalin](https://forum.shopware.com/u/Klingalin)\
**Post date:** [28. Oktober 2022 um 06:53 UTC](https://forum.shopware.com/t/elemte-im-header-skalierung/96466/9 "2022-10-28T06:53:02Z")

</div>

Vielen Dank für deine Hilfe - hat mich weiter gebracht 👍  
(Bitte entschuldige die Späte Reaktion, ich war etwas über 3 Wochen ohne Zeit für das Projekt)

---

<div class="post-metadata">

**Author:** ![aquaristikwelten-dig](https://avatars.discourse-cdn.com/v4/letter/a/cdc98d/32.png) [@aquaristikwelten-dig](https://forum.shopware.com/u/aquaristikwelten-dig)\
**Post date:** [23. Juli 2024 um 19:10 UTC](https://forum.shopware.com/t/elemte-im-header-skalierung/96466/10 "2024-07-23T19:10:13Z")

</div>

Juhu,  
Kannst du mir vielleicht einen Tipp geben, wie du das Bild in den Header bekommen hast? Ich suche verzweifelt. Bei SW5 war es irgendwie einfache.  
Danke

---

<div class="post-metadata">

**Author:** ![Klingalin](https://avatars.discourse-cdn.com/v4/letter/k/278dde/32.png) [@Klingalin](https://forum.shopware.com/u/Klingalin)\
**Post date:** [24. Juli 2024 um 06:01 UTC](https://forum.shopware.com/t/elemte-im-header-skalierung/96466/11 "2024-07-24T06:01:40Z")

</div>

Hallo,  
das war nur der erste Entwurf - mittlerweile sieht die Seite ganz anders aus.

Aber generell brauchst du ein eigenes Plugin/Theme.  
Dort erstellst du die Datei header.html.twig im Pfad \src\Resources\views\storefront\layout\header

Dateiinhalt:

```auto
{% sw_extends '@Storefront/storefront/layout/header/header.html.twig' %}

{% block layout_header_navigation %}
<style>
body {
background-image: url(‚pfadzumbild‘);
background-position: center top;
height: xxxpx;
background-repeat: no-repeat;
}
</style>
{{ parent() }}
{% endblock %}

```

„pfadzumbild“ - da den Dateipfad zum Hintergrundbild rein,  
height musst du die höhe des Bildes in Pixel definieren.

ggf. musst du noch die \< div class=„row align-items-center header-row“ \> vor dem style - Tag einfügen.

Viel Erfolg 🙂  
(Alternativ gibts viele themes im Store, welche diese Funktionen anbieten, kosten aber halt)