Elemte im Header - Skalierung

Shopware 6 (German)
1

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
image1073×99 18.1 KB

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.

2

Bild zu Thema:
image

3

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

display: flex Flexbox - Learn web development | MDN
col-x Grid system · Bootstrap

4

aah vielen Dank.

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

 {% 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

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

5

Vorgestellt hätte ich mir das dann so im xs breakpoint:
image

6

layout_header_search ist der falsche Block. layout_header_actions wäre für dich der richtige Block.

7

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
image985×89 14.9 KB

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 :slight_smile:

8

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

9

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