Header
Last updated
Last updated
We’ve introduced a range of new configurations to help you customize the look and feel of your website’s header. These changes provide more flexibility and control over how menus and elements are displayed.
Here are some of the key features:
Background Color & Inversion: You have the ability to choose a background color for the header and control text and logo inversion to ensure legibility.
Icon Labels: A new option allows you to decide whether to display icon labels in the header or keep it minimal.
Aux Bar: With a new custom menu option, the Aux Bar can be personalized. We’ve also redesigned how it’s placed on mobile for a more streamlined experience.
Main Menu: A custom menu option has been added, along with the introduction of the vertical menu design.
Graphic vs Text Menus: The Graphic Menu has been further implemented to offer more flexibility and options for displaying images alongside text-based menus.
Horizontal vs Vertical Layout: The Header Layout now offers a Horizontal or Vertical configuration. While the main difference lies in the menu placement, the entire header is rearranged to fit the selected layout for a cohesive and visually appealing look.
Desktop (No Dropdowns): If your menu has no subcategories, the layout stays mostly the same, but now you can use the Graphic Menu option to show images at the top level—something that wasn’t possible before.
Desktop (With Dropdowns): The menu works just like it did before, with no major changes to its style or functionality.
Mobile (Both Menus): Whether you choose dropdown or no-dropdown, the Graphic Menu will display images at the top level if selected. On mobile, users can now explore up to three levels of categories, with images shown at each level. For the dropdown menu, however, only two levels are available, and images only appear at the second level.
Single or Multi-Level Categories: Whether you have just one level of categories or several, the design stays the same. If you only have one level, the Horizontal Layout might be a better fit, as the Vertical Layout could look a bit empty.
Desktop vs Mobile: The design is almost identical on both desktop and mobile. On desktop, the vertical menu opens on the right and can display up to three levels, while on mobile, it takes up the full height of the screen, with each level opening on a separate page. Despite the difference in how it opens, the overall look and feel remain the same.
Text Menu consists of links only and supports up to three levels of categories. This option is simple and lightweight, ideal for text-based navigation.
Graphic Menu displays images for each subcategory (you need to set an image for each category) and supports only two levels of categories on desktop in the classic header. The visual result of the Graphic Menu can vary significantly depending on the header configuration chosen.
The images you choose for the Graphic Menu should be tailored to the layout you’re using. For Horizontal Layouts, you have more space, so larger product images work well. On Vertical or Mobile layouts, the images are much smaller, so icon-like images are recommended to keep things clear.
Additionally, the level at which the images are displayed may vary depending on the header configuration.
How images are shown in each layout:
Horizontal Layout (Dropdown - Desktop): We only show images at the second category level, not at the top.
Horizontal Layout (Dropdown - Mobile): Images are shown at all levels, including top-level and category headers.
Horizontal Layout (No Dropdown - Desktop & Mobile): Images (ideally icons) are shown at the top level, and the display is consistent across both desktop and mobile.
Vertical Layout (Desktop & Mobile): Images are displayed at all levels, including top-level and category headers.
When the Graphic Menu is selected, the images are not only added to the main navigation menus but also to the category pages. If a category has subcategories, the navigation presented on the category page will include these images. With the Text Menu option, navigation on category pages will be text-only, without images.
Note: Be mindful of the type of images you choose, as more detailed images may not render well in compact views.
