Zenit Design - Themes
Buy themeThemesSupport
EN
EN
  • First steps
  • Start Guides
    • Atmos - Demo 1
    • Atmos - Demo 2
    • Atmos - Demo 3
    • Atmos - Demo 4
    • Gravity - Demo 1
    • Gravity - Demo 2
    • Horizon - Demo 1
    • Horizon - Demo 2
    • Sphere - Demo 1
    • Sphere - Demo 2
    • Stratus - Demo 1
    • Stratus - Demo 2
    • Stratus - Demo 3
    • Stratus - Demo 4
  • Tips
    • Dashboard
    • Theme configuration
    • Dictionary
    • Multiple sales channels
  • Configuration sets
  • Support
    • Read errors
    • Find cause
  • 🎨Styling
    • General
      • Basic layout
      • Product images
      • Produkt Layout-Typ
      • Global background
      • Preloader
      • Accent line
      • Scroll animation
    • Typo & Colors
      • Theme colors
      • Status messages
      • Fonts
      • Typography
      • E-Commerce
      • Buttons
    • Logos
    • Header
      • Header
      • Search
      • Top bar
      • Shop navigation
      • Main navigation
      • Flyout navigation
      • Dropdown navigation
    • Footer
      • Footer
      • Content
      • Columns
      • Columns styling
      • Footer bottom
    • Components
      • Sidebar
      • Sidebar navigation
      • Forms
      • Image & gallery slider
      • Produkt slider
      • Category Listing Slider
      • Pagination
      • Breadcrumbs
      • Cookie banner
      • Offcanvas
      • Backdrop
      • Scroll-Up button
    • Category
      • Category header
      • Hero section
      • Filter
      • Listing actions
      • Product boxes
      • Quickview
    • Product
      • Detail
      • Gallery
      • Description
      • Description navigation
      • Description content
    • Checkout
      • Cart
      • Checkout
  • ⚙️SETTINGS
    • Basic settings
    • Custom field assignment
      • Custom fields for product page details
      • Custom fields for product datasheets
    • Social media icons
    • Marketing text slider
    • Custom tab details page
    • Custom footer columns
    • Custom code
  • 📂Contents
    • Shopping experiences
      • Sections
      • Blocks
        • Elements
          • Image text slider
          • Search banner
          • Text banner
          • Teaser
          • Features
          • Breadcrumbs
          • Code
          • Divider
          • Category-navigation
          • Footer navigation
          • Placeholder
        • Commerce
          • Image gallery and buy box with product name & manufacturer logo
          • Image gallery and buy box with product name & manufacturer logo & description
          • Image gallery and buy box with description
          • Image gallery with description and buy box with product name & manufacturer logo
        • Category
          • Category listing
        • Columns
        • Layouts
      • Block inner spacings
      • Block outer spacings
      • Animations
      • CSS Variables
    • Category
      • Hero section
      • Category header
      • CSS classes
      • Category badges
      • Category Icons
      • Products per row
    • Product page
      • Layouts
      • Default layout
      • Gallery mode
      • Custom tabs
      • Videos tab
      • Datasheets
    • Product images
      • Image sizes
      • Aspect ratio
      • File format
      • Product image background
    • Layout type
    • Responsive tables
    • Multilingualism
  • 🎓Tutorials
    • Demodata import
    • Demo theme configuration import
    • Duplicate Child-Theme
    • Customizations
    • Configuration export/import
    • Custom Fields export/import
    • Embed fonts locally
    • Embed fonts locally with child-theme
  • 🛠️Update Guides
    • Child theme update
    • Shopware 6.6.9.0
    • Shopware 6.6.0.0
    • Shopware 6.5.0.0
    • Theme 3.5.3
    • Theme 2.11.0
  • ❓FAQ
    • Overview
    • Accessibility
      • Typography
      • Colors
      • Images
      • Video
      • Accessibility checker and resources
    • General
      • Copyright notice
      • Wishlist
    • Product layout
    • Licenses
      • Trial version vs full version
      • Changing the licence domain
    • Derivations
      • Child theme
      • Theme duplicate
      • Child theme vs theme duplicate
    • Updates
      • Theme is displayed as incompatible
      • Update is not displayed
    • Known issues
      • Could not assign child-theme
      • Text modules show technical name
      • Theme save error
      • SVG logo is not displayed
      • Search / Input mobile zoom
      • Text is not visible / readable
Powered by GitBook
On this page
  • Colors
  • Logo
  • Heights & Spacings
  • Border-radius
  • Border bottom
  • Drop shadow
  • Sticky header
  • Checkout minimal header

Was this helpful?

  1. Styling
  2. Header

Header

Last updated 6 months ago

Was this helpful?

Colors

Example:

Logo

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.

Heights & Spacings

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:

Border-radius

Example:

Border bottom

The entire header can be given a Border bottom (1) to separate it more from the content.

Drop shadow

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.

Sticky header

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 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.

Checkout minimal 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.

The Auto hide (3) function improves usability, as it means that even with multi-line headers or very high single-line headers, the is not permanently reduced artificially.

🎨
viewport
Beispiel eines einzeiligen Headers
Beispiel 2: Kategorien unterhalb des Browser Falzes