Header
Last updated
Last updated
Example:
Using Logo position (1) you position the logo in the header either on the left, right or in the middle. All other elements of the header such as search, shop navigation, etc. are arranged automatically.
The Logo size mobile (2) and Logo size (3) describe the size of the logo in percent in relation to the Height mobile (4) or Height (5) of the header. This ensures that the logo cannot break out of the header - unless you use values above 100% to intentionally achieve this effect.
Example:
If the header in desktop view has a height of 100px and the logo is set to 40% of this, it results in a logo size of 40 pixels.
The height (1, 2) of the header can be set separately for mobile display and the variant for larger devices. Additionally, spacing top (3, 4) as well as spacing bottom (4,5) can be set. This can create layouts like in the example.
Example:
Example:
The entire header can be given a Border bottom (1) to separate it more from the content.
The entire header can be given a lower drop shadow to separate it more from the content.
The drop shadow can be set differently for three different header states. Drop shadow (1) activates the drop shadow for the header in the normal state. Drop shadow:hover (2) activates the dropshadow only when the mouse is hovered over the header. And Drop shadow:sticky (3) activates the shadow whenever the user scrolls down and the header is displayed fixed. This function only works if the header is also configured as a sticky header, as explained below.
For the Color of the drop shadow, a partially transparent color is usually best suited. In this example, the value is given in rgba, which you can select in the color picker using the alpha transparency. So the value rgba(0,0,0,0.1) is a pure black with 10% visibility.
The Width is to be specified in pixels and indicates how large the shadow is in pixels.
The theme includes the Sticky header feature, which fixes the header to the top of the screen when scrolling down the page. Using the display areas (1) you can specify on which devices the fixed header should be used.
Screen space (viewport) is a resource that must be used wisely, so one should not assume from a misunderstood usability approach that sticky navigation will automatically lead to better usability. Fixed headers consume valuable vertical screen space on the mobile device and do not offer the user enormous added value.
The manual offset (2) value defines the distance from top from when the header should be fixed. Leave the field empty if you want the distance of the header to the top of the browser to be determined automatically. The header will become sticky as soon as the header gets outside the visible area due to scrolling - thereupon the header will appear with an animation and will be fixed.
Option 1: Leyve blank to use automatic calculation
Option 2: If you specify an offset value of 0 fixed, the header will be fixed immediately - without animation.
Option 3: The offset value is always useful when the flyout menu or dropdown menu contains so many entries that the entries will disappear below the browsers fold. If you enter an manuel offset value an additional distance e.g. 600, the user must have at least 600 pixel scrolled down until the header will be fixed. This makes the menu items that disappeared below the browsers fold accessible again when scrolling. The header is not fixed until a later scroll distance.
The Auto hide (3) feature ensures that the complete header is only visible again when the user is about to scroll up.
The Auto hide (3) function improves usability, as it means that even with multi-line headers or very high single-line headers, the viewport is not permanently reduced artificially.
The Different header height:sticky (4) lets you specify an additional (usually lower) Header height:sticky (5). The header can shrink (or grow) to this different height in the sticky state. The setting is intended to give layouts with a large header in particular the opportunity to use the sticky function in a user-friendly manner without covering too many areas with the sticky header.
The header in the checkout in Shopware differs from the normal header. Here you have the option to set a drop shadow (1).
For the Color of the drop shadow, a partially transparent color is usually best suited. In this example, the value is given in rgba, which you can select in the color picker using the alpha transparency. So the value rgba(0,0,0,0.1) is a pure black with 10% visibility.
The Width is to be specified in pixels and indicates how large the shadow is in pixels.
The entire checkout header can be given a Border bottom (2) to separate it more from the content.
