Main navigation layout settings

The settings for managing the layout of main navigation blocks are crucial for defining the overall look and feel of the shop. These settings are applied app-wide but can be overridden at the section or block level, ensuring a consistent and customizable user experience across the site.

The Layout settings - Main navigation blocks allow you to customize how navigation elements are displayed. The Display fill available space setting enables navigation elements to stretch and occupy the full width of their container, providing a balanced appearance. The Display centered setting aligns navigation blocks to the center, creating a symmetrical and aesthetically pleasing layout.

For practical usage, you might consider enabling the Display fill available space option if your navigation menu has fewer items and you want them to spread out evenly across the header. Alternatively, enabling the Display centered option can be effective for minimalist designs, aligning navigation items centrally on pages with ample whitespace or single-column layouts. These settings offer flexibility in presentation, aligning with the theme's design goals.

Overview #

The settings outlined here define core theme settings for managing the layout of main navigation blocks. These settings are essential for controlling the overall look and feel of the shop, as they are applied app-wide but can be overridden at the section or block level. They help manage how navigation elements are displayed across the site, ensuring a consistent and customizable user experience.

Key components and functionality #

Layout settings - Main navigation blocks

This setting group is designed to manage the layout and appearance of the main navigation blocks within the theme. It provides options to customize how navigation elements are displayed, enhancing the visual coherence and usability of the site.

Display fill available space

This setting allows you to enable or disable the option to fill available space within the navigation blocks. When enabled, the navigation elements will stretch to occupy the full width of their container, providing a balanced and uniform appearance. Default: Disabled

Display centered

This setting provides the option to center the navigation blocks within their container. Enabling this setting will align the navigation elements to the center, which can be useful for creating a symmetrical and aesthetically pleasing layout. Default: Disabled

Usage examples #

  1. Filling available space: You might consider enabling the Display fill available space option if your navigation menu has fewer items and you want them to spread out evenly across the header. This can ensure that the items are distributed evenly, making the navigation look more structured.

  2. Centering navigation: For a minimalist design where the focus is on the central part of the page, you might consider enabling the Display centered option. This will align your navigation items to the center, which can be particularly effective on pages with a lot of whitespace or when using a single-column layout.

These settings provide flexibility in how navigation elements are presented, allowing for a tailored user experience that aligns with the overall design goals of the theme.