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:
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.
Das hat weniger etwas mit Shopware zu tun, viel mehr mit CSS.
display: flex Flexbox - Learn web development | MDN
col-x Grid system · Bootstrap
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:
bzw. verstehe ich dann richtig dass ich das search field/icon verschieben müsste?
Vorgestellt hätte ich mir das dann so im xs breakpoint:
layout_header_search ist der falsche Block. layout_header_actions wäre für dich der richtige Block.
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.
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 
Dann musst du dem Instagram div einfach ein margin-right: 20px oder so geben.
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)
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
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:
{% 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)
1 „Gefällt mir“
