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
  • Basic configuration
  • Border top
  • Menu items
  • Category icons

Was this helpful?

  1. Styling
  2. Header

Main navigation

Last updated 4 months ago

Was this helpful?

Basic configuration

Enable or disable the often redundant Home-Link (1) in the menu to save space. You can also decide if the home-link should get an initial active status (2) when visiting the home page of the store.

With the alignment (3) you can align and distribute the menu items horizontally. The separator (4) setting divides the single menu items with a separator.

Choose from 13+ Hover Animation (5) select the appropriate animation for your store.

The Scroller (6) optionally ensures that main navigation categories cannot wrap - no matter how many main categories you want to map. On mobile devices with touch input can be scrolled horizontally, on desktop devices can be reached with the help of arrows (1, 2).

Example:

The option subnavigation appearance (7) provides the ability to replace the standard flyout navigation with a simple dropdown navigation.

Example:

With the option Display service navigation mobile (8), the service navigation can be displayed in the mobile offcanvas menu.

Example:

Border top

Optionally, the main navigation can be separated from the upper header area by a border.

With the help of the setting Full width (1) you can stretch the line to the full header width. This way, depending on the basic layout you choose, the line will run to the edge of the browser and will not be limited by the maximum content width of your online shop.

Example:

Menu items

With the option arrows (1) you can display small arrows next to the categories which will be displayed if a category has subcategories, see example 1.

You set the spacings between each category with Padding left/right (3). Should you use a lot of categories, reduce the spacing between your categories.

Example 1:

Example 2:

Category icons

from theme version 4.7.0

Via the custom fields under Catalogues > Categories > [Select category] in the tab "Additional" you will find a media field Category Icon for configuring the icon.

You can use the checkbox Icon (1) to activate the display of icons in the main navigation and set the Size (2) of the icons for the respective menu. In the mobile view, the main menu is shown as a mobile off-canvas menu. Here, too, you can use the checkbox Icon mobile (2) to determine whether category icons should be displayed in this menu. In the field Size (4) you enter the size of the image in pixels.

Example:

Further settings for dropdown navigation can be made in the section Header > Main navigation >

Extern-link icon (4) displays the familiar "External Link" icon for categories of type "Link" when it is checked by . This way your visitors will know exactly what happens when they click on such a link, see example 2.

🎨
"Open in new tab"
Dropdown Navigation
Menu-Scroller - Arrow
Menu-Scroller - Arrow to scroll back
Dropdown-Menü
Arrow on category with child elemtns
Extern link marked with "Extern link"-Icon
Category icons in the mobile offcanvas menu